@wallarm-org/design-system 0.29.2 → 0.30.0-rc-feature-AS-884.1

package/dist/components/Selection/Selection.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface SelectionProps<T> extends TestableProps {
+    /** Source array — used for select-all and shift-click range ordering. */
+    items: T[];
+    /** Stable id extractor for items. */
+    getItemId: (item: T) => string;
+    /** Controlled selection state — array of selected item ids. */
+    value: string[];
+    /** Called with the next ordered array of selected ids. */
+    onChange: (ids: string[]) => void;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Selection: {
+    <T>({ items, getItemId, value, onChange, className, "data-testid": testId, children, }: SelectionProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Selection/Selection.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Popover } from "@ark-ui/react/popover";
+import { useIsKeyPressed } from "../../hooks/useIsKeyPressed.js";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { SelectionContext } from "./SelectionContext.js";
+import { useSelectionState } from "./useSelectionState.js";
+const SELECTION_BULKBAR_HEIGHT = 52;
+const SELECTION_BULKBAR_OFFSET = 32;
+const SELECTION_BULKBAR_POSITIONING = Object.freeze({
+    strategy: 'absolute',
+    placement: 'bottom',
+    gutter: 32,
+    overlap: true,
+    flip: false,
+    offset: {
+        mainAxis: -(SELECTION_BULKBAR_HEIGHT + SELECTION_BULKBAR_OFFSET)
+    }
+});
+const Selection = ({ items, getItemId, value, onChange, className, 'data-testid': testId, children })=>{
+    const disabledMapRef = useRef(new Map());
+    const [disabledTick, setDisabledTick] = useState(0);
+    const disabledIds = useMemo(()=>{
+        const set = new Set();
+        for (const [id, isDisabled] of disabledMapRef.current)if (isDisabled) set.add(id);
+        return set;
+    }, [
+        disabledTick
+    ]);
+    const registerDisabled = useCallback((id, disabled)=>{
+        disabledMapRef.current.set(id, disabled);
+        setDisabledTick((t)=>t + 1);
+        return ()=>{
+            disabledMapRef.current.delete(id);
+            setDisabledTick((t)=>t + 1);
+        };
+    }, []);
+    const shiftKeyRef = useIsKeyPressed('Shift');
+    const state = useSelectionState({
+        items,
+        getItemId,
+        value,
+        onChange,
+        disabledIds
+    });
+    const toggleItem = useCallback((id, opts)=>{
+        const shiftKey = opts?.shiftKey ?? shiftKeyRef.current;
+        state.toggleItem(id, {
+            shiftKey
+        });
+    }, [
+        shiftKeyRef,
+        state
+    ]);
+    const ctxValue = useMemo(()=>({
+            itemIds: state.itemIds,
+            enabledItemIds: state.enabledItemIds,
+            selectedIds: state.selectedIds,
+            isSelected: state.isSelected,
+            isAllSelected: state.isAllSelected,
+            isIndeterminate: state.isIndeterminate,
+            toggleItem,
+            selectAll: state.selectAll,
+            clear: state.clear,
+            registerDisabled
+        }), [
+        state.itemIds,
+        state.enabledItemIds,
+        state.selectedIds,
+        state.isSelected,
+        state.isAllSelected,
+        state.isIndeterminate,
+        state.selectAll,
+        state.clear,
+        toggleItem,
+        registerDisabled
+    ]);
+    return /*#__PURE__*/ jsx(SelectionContext.Provider, {
+        value: ctxValue,
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: /*#__PURE__*/ jsx(Popover.Root, {
+                open: value.length > 0,
+                closeOnInteractOutside: false,
+                portalled: false,
+                positioning: SELECTION_BULKBAR_POSITIONING,
+                children: /*#__PURE__*/ jsx(Popover.Anchor, {
+                    "data-slot": "selection",
+                    "data-testid": testId,
+                    className: cn('relative outline-none', className),
+                    children: children
+                })
+            })
+        })
+    });
+};
+Selection.displayName = 'Selection';
+export { Selection };

package/dist/components/Selection/SelectionAll.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+export interface SelectionAllProps {
+    'data-testid'?: string;
+    'aria-label'?: string;
+}
+export declare const SelectionAll: FC<SelectionAllProps>;

package/dist/components/Selection/SelectionAll.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Checkbox, CheckboxIndicator } from "../Checkbox/index.js";
+import { useSelectionContext } from "./useSelectionContext.js";
+const SelectionAll = ({ 'data-testid': testIdProp, 'aria-label': ariaLabel = 'Select all' })=>{
+    const { isAllSelected, isIndeterminate, enabledItemIds, selectAll, clear } = useSelectionContext();
+    const fallbackTestId = useTestId('all');
+    const testId = testIdProp ?? fallbackTestId;
+    return /*#__PURE__*/ jsx(Checkbox, {
+        "data-testid": testId,
+        "data-slot": "selection-all",
+        "aria-label": ariaLabel,
+        checked: isIndeterminate ? 'indeterminate' : isAllSelected,
+        disabled: 0 === enabledItemIds.length,
+        onCheckedChange: ()=>isAllSelected ? clear() : selectAll(),
+        children: /*#__PURE__*/ jsx(CheckboxIndicator, {})
+    });
+};
+SelectionAll.displayName = 'SelectionAll';
+export { SelectionAll };

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBar.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react';
+export interface SelectionBulkBarProps {
+    /** Override the toolbar accessible name. Defaults to "Bulk actions". */
+    'aria-label'?: string;
+    'data-testid'?: string;
+    children?: ReactNode;
+}
+export declare const SelectionBulkBar: FC<SelectionBulkBarProps>;

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBar.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@ark-ui/react/popover";
+import { Portal } from "@ark-ui/react/portal";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { HStack } from "../../Stack/index.js";
+import { SelectionBulkBarSummary } from "./SelectionBulkBarSummary.js";
+const SelectionBulkBar = ({ 'aria-label': ariaLabel = 'Bulk actions', 'data-testid': testIdProp, children })=>{
+    const fallbackTestId = useTestId('bulk-bar');
+    const testId = testIdProp ?? fallbackTestId;
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx(Popover.Positioner, {
+            className: "z-50",
+            children: /*#__PURE__*/ jsx(Popover.Content, {
+                role: "toolbar",
+                "aria-label": ariaLabel,
+                "data-slot": "selection-bulk-bar",
+                "data-testid": testId,
+                className: cn('bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150'),
+                children: /*#__PURE__*/ jsxs(HStack, {
+                    gap: 40,
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(SelectionBulkBarSummary, {}),
+                        /*#__PURE__*/ jsx(HStack, {
+                            gap: 8,
+                            align: "center",
+                            children: children
+                        })
+                    ]
+                })
+            })
+        })
+    });
+};
+SelectionBulkBar.displayName = 'SelectionBulkBar';
+export { SelectionBulkBar };

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBarSummary.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const SelectionBulkBarSummary: FC;

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBarSummary.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTestId } from "../../../utils/testId.js";
+import { Link } from "../../Link/index.js";
+import { HStack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { useSelectionContext } from "../useSelectionContext.js";
+const SelectionBulkBarSummary = ()=>{
+    const { isAllSelected, selectedIds, selectAll, clear } = useSelectionContext();
+    const testId = useTestId('bulk-bar-summary');
+    const count = selectedIds.size;
+    return /*#__PURE__*/ jsxs("div", {
+        "data-testid": testId,
+        className: "flex items-center gap-16 p-8",
+        children: [
+            /*#__PURE__*/ jsxs(Text, {
+                size: "sm",
+                color: "primary-alt",
+                weight: "medium",
+                children: [
+                    count,
+                    " selected"
+                ]
+            }),
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 6,
+                children: [
+                    /*#__PURE__*/ jsx(Link, {
+                        type: isAllSelected ? 'muted' : 'alt',
+                        size: "md",
+                        onClick: selectAll,
+                        disabled: isAllSelected,
+                        children: "Select all"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        color: "tertiary-alt",
+                        weight: "medium",
+                        children: "\xb7"
+                    }),
+                    /*#__PURE__*/ jsx(Link, {
+                        type: "alt",
+                        size: "md",
+                        onClick: clear,
+                        children: "Clear"
+                    })
+                ]
+            })
+        ]
+    });
+};
+SelectionBulkBarSummary.displayName = 'SelectionBulkBarSummary';
+export { SelectionBulkBarSummary };

package/dist/components/Selection/SelectionBulkBar/index.d.ts

@@ -0,0 +1 @@
+export { SelectionBulkBar, type SelectionBulkBarProps } from './SelectionBulkBar';

package/dist/components/Selection/SelectionBulkBar/index.js

@@ -0,0 +1,2 @@
+import { SelectionBulkBar } from "./SelectionBulkBar.js";
+export { SelectionBulkBar };

package/dist/components/Selection/SelectionContext.d.ts

@@ -0,0 +1,14 @@
+import type { ToggleItemOptions } from './useSelectionState';
+export interface SelectionContextValue {
+    itemIds: string[];
+    enabledItemIds: string[];
+    selectedIds: Set<string>;
+    isSelected: (id: string) => boolean;
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    toggleItem: (id: string, opts?: ToggleItemOptions) => void;
+    selectAll: () => void;
+    clear: () => void;
+    registerDisabled: (id: string, disabled: boolean) => () => void;
+}
+export declare const SelectionContext: import("react").Context<SelectionContextValue | null>;

package/dist/components/Selection/SelectionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const SelectionContext = createContext(null);
+export { SelectionContext };

package/dist/components/Selection/SelectionItem.d.ts

@@ -0,0 +1,10 @@
+import { type FC, type ReactNode } from 'react';
+export interface SelectionItemProps {
+    /** Item id — must match an id present in the `<Selection>` `items` prop. */
+    itemId: string;
+    /** When true, the checkbox is disabled and the item is excluded from select-all and ranges. */
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const SelectionItem: FC<SelectionItemProps>;

package/dist/components/Selection/SelectionItem.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { cn } from "../../utils/cn.js";
+import { Checkbox, CheckboxIndicator } from "../Checkbox/index.js";
+import { selectionItemVariants } from "./classes.js";
+import { useSelectionContext } from "./useSelectionContext.js";
+const SelectionItem = ({ itemId, disabled = false, className, children })=>{
+    const { isSelected, toggleItem, registerDisabled } = useSelectionContext();
+    const selected = isSelected(itemId);
+    useEffect(()=>registerDisabled(itemId, disabled), [
+        itemId,
+        disabled,
+        registerDisabled
+    ]);
+    const handleClickCapture = (e)=>{
+        if (disabled || !e.shiftKey) return;
+        e.preventDefault();
+        e.stopPropagation();
+        toggleItem(itemId, {
+            shiftKey: true
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "selection-item",
+        "data-selected": selected || void 0,
+        className: cn(selectionItemVariants(), className),
+        onClickCapture: handleClickCapture,
+        children: [
+            /*#__PURE__*/ jsx(Checkbox, {
+                checked: selected,
+                disabled: disabled,
+                onCheckedChange: ()=>toggleItem(itemId),
+                children: /*#__PURE__*/ jsx(CheckboxIndicator, {})
+            }),
+            children
+        ]
+    });
+};
+SelectionItem.displayName = 'SelectionItem';
+export { SelectionItem };

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

@@ -0,0 +1 @@
+export declare const selectionItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Selection/classes.js

@@ -0,0 +1,3 @@
+import { cva } from "class-variance-authority";
+const selectionItemVariants = cva('flex items-start gap-12');
+export { selectionItemVariants };

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

@@ -0,0 +1,4 @@
+export { Selection, type SelectionProps } from './Selection';
+export { SelectionAll, type SelectionAllProps } from './SelectionAll';
+export { SelectionBulkBar, type SelectionBulkBarProps, } from './SelectionBulkBar';
+export { SelectionItem, type SelectionItemProps } from './SelectionItem';

package/dist/components/Selection/index.js

@@ -0,0 +1,5 @@
+import { Selection } from "./Selection.js";
+import { SelectionAll } from "./SelectionAll.js";
+import { SelectionBulkBar } from "./SelectionBulkBar/index.js";
+import { SelectionItem } from "./SelectionItem.js";
+export { Selection, SelectionAll, SelectionBulkBar, SelectionItem };

package/dist/components/Selection/useSelectionContext.d.ts

@@ -0,0 +1,2 @@
+import { type SelectionContextValue } from './SelectionContext';
+export declare const useSelectionContext: () => SelectionContextValue;

package/dist/components/Selection/useSelectionContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { SelectionContext } from "./SelectionContext.js";
+const useSelectionContext = ()=>{
+    const ctx = useContext(SelectionContext);
+    if (!ctx) throw new Error('Selection sub-components (SelectionItem, SelectionAll, SelectionBulkBar) must be used inside <Selection>.');
+    return ctx;
+};
+export { useSelectionContext };

package/dist/components/Selection/useSelectionState.d.ts

@@ -0,0 +1,23 @@
+export interface UseSelectionStateParams<T> {
+    items: T[];
+    getItemId: (item: T) => string;
+    value: string[];
+    onChange: (ids: string[]) => void;
+    /** Set of itemIds that cannot be toggled and are excluded from selectAll. */
+    disabledIds?: Set<string>;
+}
+export interface ToggleItemOptions {
+    shiftKey?: boolean;
+}
+export interface UseSelectionStateResult {
+    itemIds: string[];
+    enabledItemIds: string[];
+    selectedIds: Set<string>;
+    isSelected: (id: string) => boolean;
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    toggleItem: (id: string, opts?: ToggleItemOptions) => void;
+    selectAll: () => void;
+    clear: () => void;
+}
+export declare const useSelectionState: <T>({ items, getItemId, value, onChange, disabledIds, }: UseSelectionStateParams<T>) => UseSelectionStateResult;

package/dist/components/Selection/useSelectionState.js

@@ -0,0 +1,99 @@
+import { useCallback, useMemo, useRef } from "react";
+const EMPTY_DISABLED = new Set();
+const useSelectionState = ({ items, getItemId, value, onChange, disabledIds })=>{
+    const itemIds = useMemo(()=>items.map(getItemId), [
+        items,
+        getItemId
+    ]);
+    const itemIdSet = useMemo(()=>new Set(itemIds), [
+        itemIds
+    ]);
+    const disabled = disabledIds ?? EMPTY_DISABLED;
+    const enabledItemIds = useMemo(()=>itemIds.filter((id)=>!disabled.has(id)), [
+        itemIds,
+        disabled
+    ]);
+    const selectedIds = useMemo(()=>new Set(value), [
+        value
+    ]);
+    const lastToggledIdRef = useRef(null);
+    const isSelected = useCallback((id)=>selectedIds.has(id), [
+        selectedIds
+    ]);
+    const enabledSelectedCount = useMemo(()=>{
+        let n = 0;
+        for (const id of enabledItemIds)if (selectedIds.has(id)) n++;
+        return n;
+    }, [
+        enabledItemIds,
+        selectedIds
+    ]);
+    const isAllSelected = enabledItemIds.length > 0 && enabledSelectedCount === enabledItemIds.length;
+    const isIndeterminate = enabledSelectedCount > 0 && enabledSelectedCount < enabledItemIds.length;
+    const emitOrdered = useCallback((ids)=>{
+        const next = [];
+        for (const id of itemIds)if (ids.has(id)) next.push(id);
+        for (const id of value)if (!itemIdSet.has(id) && ids.has(id)) next.push(id);
+        onChange(next);
+    }, [
+        itemIds,
+        itemIdSet,
+        value,
+        onChange
+    ]);
+    const toggleItem = useCallback((id, opts)=>{
+        if (!itemIdSet.has(id)) return;
+        if (disabled.has(id)) return;
+        const lastId = lastToggledIdRef.current;
+        const wantsRange = !!opts?.shiftKey && null !== lastId && lastId !== id;
+        if (wantsRange) {
+            const fromIdx = itemIds.indexOf(lastId);
+            const toIdx = itemIds.indexOf(id);
+            if (-1 !== fromIdx && -1 !== toIdx) {
+                const start = Math.min(fromIdx, toIdx);
+                const end = Math.max(fromIdx, toIdx);
+                const selecting = !selectedIds.has(id);
+                const next = new Set(selectedIds);
+                for (const rangeId of itemIds.slice(start, end + 1))if (!disabled.has(rangeId)) if (selecting) next.add(rangeId);
+                else next.delete(rangeId);
+                emitOrdered(next);
+                lastToggledIdRef.current = id;
+                return;
+            }
+        }
+        const next = new Set(selectedIds);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        emitOrdered(next);
+        lastToggledIdRef.current = id;
+    }, [
+        itemIdSet,
+        disabled,
+        itemIds,
+        selectedIds,
+        emitOrdered
+    ]);
+    const selectAll = useCallback(()=>{
+        emitOrdered(new Set(enabledItemIds));
+    }, [
+        enabledItemIds,
+        emitOrdered
+    ]);
+    const clear = useCallback(()=>{
+        onChange([]);
+    }, [
+        onChange
+    ]);
+    return {
+        itemIds,
+        enabledItemIds,
+        selectedIds,
+        isSelected,
+        isAllSelected,
+        isIndeterminate,
+        toggleItem,
+        selectAll,
+        clear
+    };
+};
+export { useSelectionState };

package/dist/index.d.ts

@@ -44,6 +44,7 @@ export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaC
 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 { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
+export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarProps, SelectionItem, type SelectionItemProps, type SelectionProps, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { Skeleton, type SkeletonProps } from './components/Skeleton';
 export { SplitButton, type SplitButtonProps } from './components/SplitButton';

package/dist/index.js

@@ -33,6 +33,7 @@ import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, S
 import { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 import { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
 import { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator } from "./components/Select/index.js";
+import { Selection, SelectionAll, SelectionBulkBar, SelectionItem } from "./components/Selection/index.js";
 import { Separator } from "./components/Separator/index.js";
 import { Skeleton } from "./components/Skeleton/index.js";
 import { SplitButton } from "./components/SplitButton/index.js";
@@ -50,4 +51,4 @@ import { ToggleButton } from "./components/ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, 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, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, 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, 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, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, getLocalTimeZone, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, 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, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, 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, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, getLocalTimeZone, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.29.1",
-  "generatedAt": "2026-04-27T09:32:45.403Z",
+  "version": "0.29.2",
+  "generatedAt": "2026-04-27T14:28:46.652Z",
   "components": [
     {
       "name": "Alert",
@@ -23958,6 +23958,93 @@
         }
       ]
     },
+    {
+      "name": "Selection",
+      "importPath": "@wallarm-org/design-system/Selection",
+      "props": [
+        {
+          "name": "items",
+          "type": "T[]",
+          "required": true,
+          "description": "Source array — used for select-all and shift-click range ordering."
+        },
+        {
+          "name": "getItemId",
+          "type": "(item: T) => string",
+          "required": true,
+          "description": "Stable id extractor for items."
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": true,
+          "description": "Controlled selection state — array of selected item ids."
+        }
+      ],
+      "variants": [],
+      "subComponents": [
+        {
+          "name": "SelectionAll",
+          "props": []
+        },
+        {
+          "name": "SelectionBulkBar",
+          "props": []
+        },
+        {
+          "name": "SelectionItem",
+          "props": [
+            {
+              "name": "itemId",
+              "type": "string",
+              "required": true,
+              "description": "Item id — must match an id present in the `<Selection>` `items` prop."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "When true, the checkbox is disabled and the item is excluded from select-all and ranges.",
+              "defaultValue": "false"
+            }
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button\n          variant='ghost'\n          color='neutral-alt'\n          onClick={() => alert(`Duplicate ${selected.length}`)}\n        >\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => alert(`Delete ${selected.length}`)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}"
+        },
+        {
+          "name": "WithSelectAll",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={16}>\n        <HStack gap={8} align='center'>\n          <SelectionAll />\n          <Text size='sm' color='secondary'>\n            Select all\n          </Text>\n        </HStack>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => alert(`Delete ${selected.length}`)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}"
+        },
+        {
+          "name": "Grid",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <div className='grid grid-cols-3 gap-12'>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </div>\n\n      <SelectionBulkBar>\n        <Button onClick={() => alert(selected.join(', '))}>Inspect</Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}"
+        },
+        {
+          "name": "WithDisabled",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={8}>\n        <HStack gap={8} align='center'>\n          <SelectionAll />\n          <Text size='sm' color='secondary'>\n            Select all (locked items skipped)\n          </Text>\n        </HStack>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id} disabled={c.locked}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => alert(`Delete ${selected.length}`)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}"
+        },
+        {
+          "name": "RangeSelection",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        <Text size='sm' color='secondary'>\n          Tip: hold <kbd>Shift</kbd> and click another checkbox to select a range.\n        </Text>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button color='brand' onClick={() => alert(`Selected: ${selected.join(', ')}`)}>\n          Confirm\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}"
+        },
+        {
+          "name": "BulkActions",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={12}>\n        {clusters.map(c => (\n          <SelectionItem key={c.id} itemId={c.id}>\n            <ClusterCard cluster={c} />\n          </SelectionItem>\n        ))}\n      </VStack>\n\n      <SelectionBulkBar>\n        <Button\n          variant='ghost'\n          color='neutral-alt'\n          onClick={() => alert(`Move ${selected.length}`)}\n        >\n          <Folder /> Move\n        </Button>\n        <Button\n          variant='ghost'\n          color='neutral-alt'\n          onClick={() => alert(`Duplicate ${selected.length}`)}\n        >\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => alert(`Delete ${selected.length}`)}>\n          <Trash2 /> Delete\n        </Button>\n      </SelectionBulkBar>\n    </Selection>\n  );\n}"
+        },
+        {
+          "name": "EmptyAndPartial",
+          "code": "() => {\n  const [items, setItems] = useState<Cluster[]>(clusters);\n  const [selected, setSelected] = useState<string[]>(['1', 'ghost']);\n\n  // Demonstrate cleanup pattern: drop ids that no longer exist in items.\n  useEffect(() => {\n    setSelected(prev => prev.filter(id => items.some(c => c.id === id)));\n  }, [items]);\n\n  return (\n    <VStack gap={16}>\n      <HStack gap={8}>\n        <Button onClick={() => setItems([])} variant='outline'>\n          Clear items\n        </Button>\n        <Button onClick={() => setItems(clusters)} variant='outline'>\n          Restore items\n        </Button>\n      </HStack>\n\n      <Selection items={items} getItemId={c => c.id} value={selected} onChange={setSelected}>\n        <VStack gap={12}>\n          {items.length === 0 ? (\n            <Text size='sm' color='secondary'>\n              No items.\n            </Text>\n          ) : (\n            items.map(c => (\n              <SelectionItem key={c.id} itemId={c.id}>\n                <ClusterCard cluster={c} />\n              </SelectionItem>\n            ))\n          )}\n        </VStack>\n\n        <SelectionBulkBar>\n          <Button color='brand' onClick={() => alert(`Delete ${selected.length}`)}>\n            <Trash2 /> Delete\n          </Button>\n        </SelectionBulkBar>\n      </Selection>\n    </VStack>\n  );\n}"
+        },
+        {
+          "name": "WithoutBulkBar",
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n      <VStack gap={16}>\n        <Text size='sm' color='secondary'>\n          Selected: {selected.length}\n        </Text>\n\n        <VStack gap={12}>\n          {clusters.map(c => (\n            <SelectionItem key={c.id} itemId={c.id}>\n              <ClusterCard cluster={c} />\n            </SelectionItem>\n          ))}\n        </VStack>\n      </VStack>\n    </Selection>\n  );\n}"
+        }
+      ]
+    },
     {
       "name": "Separator",
       "importPath": "@wallarm-org/design-system/Separator",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.29.2",
+  "version": "0.30.0-rc-feature-AS-884.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",