@wallarm-org/design-system 0.62.0 → 0.63.0

package/dist/components/DropdownMenu/DropdownMenuItem.js

@@ -4,9 +4,9 @@ import { Menu } from "@ark-ui/react/menu";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuItemVariants } from "./classes.js";
-const DropdownMenuItem = ({ inset = false, variant = 'default', onSelect, disabled, value, className, ...props })=>{
+const DropdownMenuItem = ({ inset = false, variant = 'default', onSelect, disabled, value, className, 'data-testid': testIdProp, ...props })=>{
     const autoId = useId();
-    const testId = useTestId('item');
+    const testId = useTestId('item', testIdProp);
     return /*#__PURE__*/ jsx(Menu.Item, {
         ...props,
         value: value ?? autoId,

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

@@ -1,5 +1,6 @@
 import { type FC, type HTMLAttributes, type Ref } from 'react';
-export interface DropdownMenuRadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import { type TestableProps } from '../../utils/testId';
+export interface DropdownMenuRadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, TestableProps {
     value?: string;
     onValueChange?: (details: {
         value: string;

package/dist/components/DropdownMenu/DropdownMenuRadioGroup.js

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { Menu } from "@ark-ui/react/menu";
 import { useTestId } from "../../utils/testId.js";
-const DropdownMenuRadioGroup = ({ value, onValueChange, ...props })=>{
-    const id = useId();
-    const testId = useTestId('radio-group');
+const DropdownMenuRadioGroup = ({ value, onValueChange, id: idProp, 'data-testid': testIdProp, ...props })=>{
+    const autoId = useId();
+    const testId = useTestId('radio-group', testIdProp);
     return /*#__PURE__*/ jsx(Menu.RadioItemGroup, {
         ...props,
-        id: id,
+        id: idProp ?? autoId,
         value: value,
         onValueChange: onValueChange,
         "data-testid": testId

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

@@ -1,8 +1,9 @@
 import type { FC, HTMLAttributes, Ref } from 'react';
 import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
 import { dropdownMenuItemVariants } from './classes';
 type DropdownMenuRadioItemVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
-export interface DropdownMenuRadioItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuRadioItemVariantsProps {
+export interface DropdownMenuRadioItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuRadioItemVariantsProps, TestableProps {
     /** Required — identifies this radio within the group */
     value: string;
     disabled?: boolean;

package/dist/components/DropdownMenu/DropdownMenuRadioItem.js

@@ -5,8 +5,8 @@ import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuItemVariants } from "./classes.js";
 import { DropdownMenuItemIndicator } from "./DropdownMenuItemIndicator.js";
-const DropdownMenuRadioItem = ({ children, value, disabled, closeOnSelect, variant = 'default', className, ...props })=>{
-    const testId = useTestId('radio-item');
+const DropdownMenuRadioItem = ({ children, value, disabled, closeOnSelect, variant = 'default', className, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('radio-item', testIdProp);
     return /*#__PURE__*/ jsxs(Menu.RadioItem, {
         ...props,
         value: value,

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

@@ -1,10 +1,8 @@
-import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
-import type { DropdownMenuItemVariantsProps } from './DropdownMenuItem';
-interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLButtonElement>, DropdownMenuItemVariantsProps {
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface DropdownMenuTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
     children: ReactNode;
     asChild?: boolean;
-    inset?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 export declare const DropdownMenuTrigger: FC<DropdownMenuTriggerProps>;
-export {};

package/dist/components/DropdownMenu/DropdownMenuTrigger.js

@@ -10,8 +10,8 @@ const TriggerStateInjector = ({ children })=>{
     });
     return children;
 };
-const DropdownMenuTrigger = ({ variant = 'default', inset = false, asChild, children, ...props })=>{
-    const testId = useTestId('trigger');
+const DropdownMenuTrigger = ({ asChild, children, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('trigger', testIdProp);
     return /*#__PURE__*/ jsx(Menu.Trigger, {
         ...props,
         asChild: asChild,

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

@@ -1,10 +1,10 @@
 import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
 import type { DropdownMenuItemVariantsProps } from './DropdownMenuItem';
-interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLButtonElement>, DropdownMenuItemVariantsProps {
+export interface DropdownMenuTriggerItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, DropdownMenuItemVariantsProps, TestableProps {
     children: ReactNode;
     asChild?: boolean;
     inset?: boolean;
-    ref?: Ref<HTMLButtonElement>;
+    ref?: Ref<HTMLDivElement>;
 }
-export declare const DropdownMenuTriggerItem: FC<DropdownMenuTriggerProps>;
-export {};
+export declare const DropdownMenuTriggerItem: FC<DropdownMenuTriggerItemProps>;

package/dist/components/DropdownMenu/DropdownMenuTriggerItem.js

@@ -4,14 +4,15 @@ import { ChevronRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuItemVariants } from "./classes.js";
-const DropdownMenuTriggerItem = ({ variant = 'default', inset = false, children })=>{
-    const testId = useTestId('trigger-item');
+const DropdownMenuTriggerItem = ({ variant = 'default', inset = false, children, className, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('trigger-item', testIdProp);
     return /*#__PURE__*/ jsxs(Menu.TriggerItem, {
+        ...rest,
         "data-testid": testId,
         className: cn(dropdownMenuItemVariants({
             variant,
             inset
-        })),
+        }), className),
         children: [
             children,
             /*#__PURE__*/ jsx("div", {

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

@@ -2,11 +2,11 @@ export { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVari
 export { DropdownMenu } from './DropdownMenu';
 export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem';
 export { DropdownMenuContent } from './DropdownMenuContent';
-export { DropdownMenuContextTrigger } from './DropdownMenuContextTrigger';
+export { DropdownMenuContextTrigger, type DropdownMenuContextTriggerProps, } from './DropdownMenuContextTrigger';
 export { DropdownMenuFooter } from './DropdownMenuFooter';
 export { DropdownMenuGroup } from './DropdownMenuGroup';
 export { DropdownMenuInput } from './DropdownMenuInput';
-export { DropdownMenuItem } from './DropdownMenuItem';
+export { DropdownMenuItem, type DropdownMenuItemProps } from './DropdownMenuItem';
 export { DropdownMenuItemContent } from './DropdownMenuItemContent';
 export { DropdownMenuItemDescription } from './DropdownMenuItemDescription';
 export { DropdownMenuItemIcon } from './DropdownMenuItemIcon';
@@ -16,5 +16,5 @@ export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './Dro
 export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem';
 export { DropdownMenuSeparator } from './DropdownMenuSeparator';
 export { DropdownMenuShortcut } from './DropdownMenuShortcut';
-export { DropdownMenuTrigger } from './DropdownMenuTrigger';
-export { DropdownMenuTriggerItem } from './DropdownMenuTriggerItem';
+export { DropdownMenuTrigger, type DropdownMenuTriggerProps } from './DropdownMenuTrigger';
+export { DropdownMenuTriggerItem, type DropdownMenuTriggerItemProps, } from './DropdownMenuTriggerItem';

package/dist/components/NavRail/NavRailItem.d.ts

@@ -1,6 +1,7 @@
 import { type AnchorHTMLAttributes, type ComponentType, type FC, type ReactNode, type Ref } from 'react';
 import type { SvgIconProps } from '../../icons/SvgIcon';
-export interface NavRailItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+import { type TestableProps } from '../../utils/testId';
+export interface NavRailItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, TestableProps {
     ref?: Ref<HTMLAnchorElement>;
     asChild?: boolean;
     icon: ComponentType<SvgIconProps>;

package/dist/components/NavRail/NavRailItem.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useRef } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Kbd } from "../Kbd/index.js";
@@ -11,9 +11,9 @@ import { TooltipTrigger } from "../Tooltip/TooltipTrigger.js";
 import { navRailItemVariants } from "./classes.js";
 import { useNavRailContext } from "./NavRailContext.js";
 import { useShortcut } from "./useShortcut.js";
-const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, className, children, ...props })=>{
+const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active = false, className, children, 'data-testid': testIdProp, ...props })=>{
     const { collapsed } = useNavRailContext();
-    const testId = useTestId('item');
+    const testId = useTestId('item', testIdProp);
     const Comp = asChild ? Slot : 'a';
     const internalRef = useRef(null);
     useShortcut(shortcut, internalRef);
@@ -37,7 +37,9 @@ const NavRailItem = ({ ref, asChild = false, icon: Icon, label, shortcut, active
                 className: cn('truncate whitespace-nowrap transition-[opacity,width] duration-200 pl-8'),
                 children: label
             }),
-            children
+            /*#__PURE__*/ jsx(Slottable, {
+                children: children
+            })
         ]
     });
     return /*#__PURE__*/ jsxs(Tooltip, {

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

@@ -1,11 +1,11 @@
-import { type FC, type ReactNode } from 'react';
+import { type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { type TestableProps } from '../../utils/testId';
 import type { PopoverSizeDimension } from './types';
-export interface PopoverContentProps {
+export interface PopoverContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style'>, TestableProps {
     children: ReactNode;
     minHeight?: PopoverSizeDimension;
     maxHeight?: PopoverSizeDimension;
     minWidth?: PopoverSizeDimension;
     maxWidth?: PopoverSizeDimension;
-    'data-testid'?: string;
 }
 export declare const PopoverContent: FC<PopoverContentProps>;

package/dist/components/Popover/PopoverContent.js

@@ -6,9 +6,8 @@ import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
 import { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_HEIGHT, POPOVER_MIN_WIDTH } from "./constants.js";
-const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH, 'data-testid': testIdProp })=>{
-    const contextTestId = useTestId('content');
-    const testId = testIdProp ?? contextTestId;
+const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH, className, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('content', testIdProp);
     const { getContentProps } = usePopoverContext();
     const { id } = getContentProps();
     const style = useMemo(()=>({
@@ -22,17 +21,14 @@ const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight =
         minWidth,
         maxWidth
     ]);
-    const handleClick = (event)=>{
-        event.stopPropagation();
-    };
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Popover.Positioner, {
             children: /*#__PURE__*/ jsx(Popover.Content, {
+                ...rest,
                 id: id,
                 "data-testid": testId,
                 style: style,
-                className: cn('flex flex-col', 'min-w-(--popover-min-width)', 'max-w-[clamp(var(--popover-min-width),var(--available-width),var(--popover-max-width))]', 'min-h-(--popover-min-height)', 'max-h-[clamp(var(--popover-min-height),var(--available-height),var(--popover-max-height))]', 'p-12 bg-bg-surface-2 rounded-12 border border-border-primary-light shadow-md text-text-primary z-50', '[&_[data-part=viewport]]:overscroll-contain', 'animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2', 'data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2', 'data-[side=top]:slide-in-from-bottom-2'),
-                onClick: handleClick,
+                className: cn('flex flex-col', 'min-w-(--popover-min-width)', 'max-w-[clamp(var(--popover-min-width),var(--available-width),var(--popover-max-width))]', 'min-h-(--popover-min-height)', 'max-h-[clamp(var(--popover-min-height),var(--available-height),var(--popover-max-height))]', 'p-12 bg-bg-surface-2 rounded-12 border border-border-primary-light shadow-md text-text-primary z-50', '[&_[data-part=viewport]]:overscroll-contain', 'animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2', 'data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2', 'data-[side=top]:slide-in-from-bottom-2', className),
                 asChild: true,
                 children: /*#__PURE__*/ jsxs(ScrollArea, {
                     ids: {

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

@@ -1,10 +1,8 @@
-import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
-type PopoverNativeProps = HTMLAttributes<HTMLButtonElement>;
-interface PopoverTriggerBaseProps {
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface PopoverTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
     children: ReactNode;
     asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
-export type PopoverTriggerProps = PopoverNativeProps & PopoverTriggerBaseProps;
 export declare const PopoverTrigger: FC<PopoverTriggerProps>;
-export {};

package/dist/components/Popover/PopoverTrigger.js

@@ -1,16 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@ark-ui/react/popover";
 import { useTestId } from "../../utils/testId.js";
-const PopoverTrigger = ({ asChild = false, ...props })=>{
-    const testId = useTestId('trigger');
-    const handleClick = (event)=>{
-        event.stopPropagation();
-    };
+const PopoverTrigger = ({ asChild = false, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('trigger', testIdProp);
     return /*#__PURE__*/ jsx(Popover.Trigger, {
         ...props,
         asChild: asChild,
-        "data-testid": testId,
-        onClick: handleClick
+        "data-testid": testId
     });
 };
 PopoverTrigger.displayName = 'PopoverTrigger';

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

@@ -1,4 +1,4 @@
 export { Popover } from './Popover';
-export { PopoverContent } from './PopoverContent';
-export { PopoverTrigger } from './PopoverTrigger';
+export { PopoverContent, type PopoverContentProps } from './PopoverContent';
+export { PopoverTrigger, type PopoverTriggerProps } from './PopoverTrigger';
 export type { PopoverSizeDimension } from './types';

package/dist/components/SegmentedControl/SegmentedControlItem.d.ts

@@ -1,17 +1,19 @@
-import type { FC, PropsWithChildren, Ref } from 'react';
+import type { FC, KeyboardEvent, LabelHTMLAttributes, PropsWithChildren, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+type SegmentedControlItemNativeProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'onKeyDown'>;
 /**
  * Individual item within a SegmentedControl.
  *
  * Built on Ark UI's SegmentGroup.Item with radio input behavior and accessibility.
  * Selection state is managed by the parent SegmentedControl.
  */
-export interface SegmentedControlItemProps {
+export interface SegmentedControlItemProps extends SegmentedControlItemNativeProps, TestableProps {
     /** Unique value that identifies this item */
     value: string;
     /** Whether this item is disabled */
     disabled?: boolean;
-    /** Additional CSS class */
-    className?: string;
     ref?: Ref<HTMLLabelElement>;
+    onKeyDown?: (event: KeyboardEvent<HTMLLabelElement>) => void;
 }
 export declare const SegmentedControlItem: FC<PropsWithChildren<SegmentedControlItemProps>>;
+export {};

package/dist/components/SegmentedControl/SegmentedControlItem.js

@@ -3,12 +3,15 @@ import { SegmentGroup } from "@ark-ui/react/segment-group";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { segmentedControlItemClassNamesBase } from "./classes.js";
-const SegmentedControlItem = ({ className, value, disabled, children, ref })=>{
-    const testId = useTestId('item');
+const SegmentedControlItem = ({ className, value, disabled, children, ref, onKeyDown, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('item', testIdProp);
     const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
         if ((' ' === event.key || 'Enter' === event.key) && !disabled) event.currentTarget.click();
     };
     return /*#__PURE__*/ jsxs(SegmentGroup.Item, {
+        ...rest,
         ref: ref,
         value: value,
         disabled: disabled,

package/dist/components/SegmentedTabs/SegmentedTabsTrigger.d.ts

@@ -1,10 +1,12 @@
-import type { FC, ReactNode } from 'react';
-export interface SegmentedTabsTriggerProps {
+import type { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { type TestableProps } from '../../utils/testId';
+type SegmentedTabsTriggerNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'children'>;
+export interface SegmentedTabsTriggerProps extends SegmentedTabsTriggerNativeProps, TestableProps {
     children: ReactNode;
     value: string;
-    disabled?: boolean;
     asChild?: boolean;
     /** Show a small brand-colored dot indicator next to the tab label */
     indicator?: boolean;
 }
 export declare const SegmentedTabsTrigger: FC<SegmentedTabsTriggerProps>;
+export {};

package/dist/components/SegmentedTabs/SegmentedTabsTrigger.js

@@ -3,11 +3,12 @@ import { Tabs } from "@ark-ui/react/tabs";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { segmentedControlItemClassNamesBase } from "../SegmentedControl/index.js";
-const SegmentedTabsTrigger = ({ children, value, disabled = false, asChild = false, indicator = false })=>{
-    const testId = useTestId('trigger');
+const SegmentedTabsTrigger = ({ children, value, disabled = false, asChild = false, indicator = false, className, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('trigger', testIdProp);
     return /*#__PURE__*/ jsxs(Tabs.Trigger, {
+        ...rest,
         "data-testid": testId,
-        className: cn(segmentedControlItemClassNamesBase, 'group z-1', '[&:has([data-slot=segmented-tabs-trigger-button])]:px-20', '[&:has([data-slot=segmented-tabs-trigger-button])]:overflow-visible', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:absolute', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:right-0', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:w-32', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:h-24', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:rounded-r-8', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:transition-opacity', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:opacity-0', '[&:has([data-slot=segmented-tabs-trigger-button]):hover]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button]):active]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:bg-linear-to-r', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:from-transparent', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:to-20%', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:to-bg-primary', '[[data-selected]:has([data-slot=segmented-tabs-trigger-button])]:before:to-bg-surface-3', '[&:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:to-bg-primary', '[[data-selected]:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:to-bg-surface-3', '**:data-[slot=segmented-tabs-trigger-button]:absolute', '**:data-[slot=segmented-tabs-trigger-button]:right-2', '**:data-[slot=segmented-tabs-trigger-button]:top-1/2', '**:data-[slot=segmented-tabs-trigger-button]:-translate-y-1/2 ', '**:data-[slot=segmented-tabs-trigger-button]:z-1', '**:data-[slot=segmented-tabs-trigger-button]:overflow-visible', '**:data-[slot=segmented-tabs-trigger-button]:opacity-0', '**:data-[slot=segmented-tabs-trigger-button]:data-[state=open]:opacity-100', 'not-data-disabled:not-data-selected:hover:text-text-primary', 'hover:[&:not([data-disabled])_[data-slot=segmented-tabs-trigger-button]]:opacity-100', 'data-selected:text-text-primary'),
+        className: cn(segmentedControlItemClassNamesBase, 'group z-1', '[&:has([data-slot=segmented-tabs-trigger-button])]:px-20', '[&:has([data-slot=segmented-tabs-trigger-button])]:overflow-visible', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:absolute', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:right-0', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:w-32', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:h-24', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:rounded-r-8', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:transition-opacity', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:opacity-0', '[&:has([data-slot=segmented-tabs-trigger-button]):hover]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button]):active]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:bg-linear-to-r', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:from-transparent', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:to-20%', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:to-bg-primary', '[[data-selected]:has([data-slot=segmented-tabs-trigger-button])]:before:to-bg-surface-3', '[&:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:to-bg-primary', '[[data-selected]:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:to-bg-surface-3', '**:data-[slot=segmented-tabs-trigger-button]:absolute', '**:data-[slot=segmented-tabs-trigger-button]:right-2', '**:data-[slot=segmented-tabs-trigger-button]:top-1/2', '**:data-[slot=segmented-tabs-trigger-button]:-translate-y-1/2 ', '**:data-[slot=segmented-tabs-trigger-button]:z-1', '**:data-[slot=segmented-tabs-trigger-button]:overflow-visible', '**:data-[slot=segmented-tabs-trigger-button]:opacity-0', '**:data-[slot=segmented-tabs-trigger-button]:data-[state=open]:opacity-100', 'not-data-disabled:not-data-selected:hover:text-text-primary', 'hover:[&:not([data-disabled])_[data-slot=segmented-tabs-trigger-button]]:opacity-100', 'data-selected:text-text-primary', className),
         value: value,
         disabled: disabled,
         asChild: asChild,
@@ -21,4 +22,5 @@ const SegmentedTabsTrigger = ({ children, value, disabled = false, asChild = fal
         ]
     });
 };
+SegmentedTabsTrigger.displayName = 'SegmentedTabsTrigger';
 export { SegmentedTabsTrigger };

package/dist/components/SegmentedTabs/SegmentedTabsTriggerButton.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { Ellipsis } from "../../icons/index.js";
 import { useTestId } from "../../utils/testId.js";
 import { Button } from "../Button/index.js";
-const SegmentedTabsTriggerButton = (props)=>{
-    const testId = useTestId('trigger-button');
+const SegmentedTabsTriggerButton = ({ 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('trigger-button', testIdProp);
     return /*#__PURE__*/ jsx(Button, {
         ...props,
         "data-testid": testId,

package/dist/components/Select/SelectButton.js

@@ -6,8 +6,8 @@ import { SelectArrow } from "./SelectArrow.js";
 import { useSelectSharedContext } from "./SelectSharedContext/index.js";
 import { SelectValueIcon } from "./SelectValueIcon.js";
 import { SelectValueText } from "./SelectValueText.js";
-const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', ...props })=>{
-    const testId = useTestId('button');
+const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('button', testIdProp);
     const { loading } = useSelectSharedContext();
     const { disabled } = useSelectContext();
     return /*#__PURE__*/ jsx(Select.Control, {

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

@@ -1,9 +1,10 @@
 import type { FC } from 'react';
 import { Select as ArkUiSelect } from '@ark-ui/react/select';
 import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
 import { linkVariants } from '../Link';
 type SelectClearTriggerNativeProps = Omit<ArkUiSelect.TriggerProps, 'className' | 'type'>;
 type SelectClearTriggerVariantsProps = VariantProps<typeof linkVariants>;
-type SelectClearTriggerProps = SelectClearTriggerNativeProps & SelectClearTriggerVariantsProps;
+type SelectClearTriggerProps = SelectClearTriggerNativeProps & SelectClearTriggerVariantsProps & TestableProps;
 export declare const SelectClearTrigger: FC<SelectClearTriggerProps>;
 export {};

package/dist/components/Select/SelectClearTrigger.js

@@ -3,8 +3,8 @@ import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { linkVariants } from "../Link/index.js";
-const SelectClearTrigger = ({ type = 'default', size = 'sm', weight = 'medium', ...props })=>{
-    const testId = useTestId('clear-trigger');
+const SelectClearTrigger = ({ type = 'default', size = 'sm', weight = 'medium', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('clear-trigger', testIdProp);
     return /*#__PURE__*/ jsx(Select.ClearTrigger, {
         ...props,
         "data-testid": testId,

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

@@ -1,5 +1,8 @@
 import type { FC } from 'react';
 import { type SelectValueTextProps } from '../SelectValueText';
-type SelectInputProps = Pick<SelectValueTextProps, 'placeholder'>;
+interface SelectInputBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
+    'data-testid'?: string;
+}
+type SelectInputProps = SelectInputBaseProps & Pick<SelectValueTextProps, 'placeholder'>;
 export declare const SelectInput: FC<SelectInputProps>;
 export {};

package/dist/components/Select/SelectInput/SelectInput.js

@@ -50,7 +50,7 @@ const selectInputVariants = cva([
         }
     ]
 });
-const SelectInput = ({ placeholder = 'Choose...' })=>{
+const SelectInput = ({ placeholder = 'Choose...', className, ...rest })=>{
     const { selectedItems, disabled, multiple } = useSelectContext();
     const isEmpty = selectedItems.length <= 0;
     return /*#__PURE__*/ jsx(Select.Control, {
@@ -58,10 +58,11 @@ const SelectInput = ({ placeholder = 'Choose...' })=>{
         children: /*#__PURE__*/ jsx(Select.Trigger, {
             asChild: true,
             children: /*#__PURE__*/ jsxs("div", {
+                ...rest,
                 className: cn(selectInputVariants({
                     empty: isEmpty,
                     multiple
-                }), 'w-full max-w-full gap-8'),
+                }), 'w-full max-w-full gap-8', className),
                 tabIndex: disabled ? -1 : 0,
                 children: [
                     multiple && !isEmpty ? /*#__PURE__*/ jsx(OverflowList, {

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

@@ -1,12 +1,13 @@
 import type { FC } from 'react';
 import { Select as ArkUiSelect, type CollectionItem } from '@ark-ui/react/select';
 import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
 import { dropdownMenuItemVariants } from '../DropdownMenu';
 type SelectOptionNativeProps = Omit<ArkUiSelect.ItemProps, 'className'>;
 type SelectOptionVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
 export interface SelectOptionBaseProps {
     item: CollectionItem;
 }
-type SelectOptionProps = SelectOptionNativeProps & SelectOptionVariantsProps & SelectOptionBaseProps;
+type SelectOptionProps = SelectOptionNativeProps & SelectOptionVariantsProps & SelectOptionBaseProps & TestableProps;
 export declare const SelectOption: FC<SelectOptionProps>;
 export {};

package/dist/components/Select/SelectOption.js

@@ -3,8 +3,8 @@ import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuItemVariants } from "../DropdownMenu/index.js";
-const SelectOption = ({ variant = 'default', ...props })=>{
-    const testId = useTestId('option');
+const SelectOption = ({ variant = 'default', 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('option', testIdProp);
     return /*#__PURE__*/ jsx(Select.Item, {
         ...props,
         "data-testid": testId,

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

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-export interface SelectSearchInputProps {
+import type { FC, HTMLAttributes } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface SelectSearchInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'color'>, TestableProps {
     value: string;
     onChange: (value: string) => void;
 }

package/dist/components/Select/SelectSearchInput.js

@@ -3,12 +3,13 @@ import { Search } from "../../icons/index.js";
 import { useTestId } from "../../utils/testId.js";
 import { Input } from "../Input/index.js";
 import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
-const SelectSearchInput = ({ value, onChange })=>{
-    const testId = useTestId('search-input');
+const SelectSearchInput = ({ value, onChange, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('search-input', testIdProp);
     const handleChange = (event)=>{
         onChange(event.target.value);
     };
     return /*#__PURE__*/ jsxs(InputGroup, {
+        ...rest,
         "data-testid": testId,
         children: [
             /*#__PURE__*/ jsx(InputGroupAddon, {

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

@@ -14,6 +14,6 @@ export { SelectOptionDescription } from './SelectOptionDescription';
 export { SelectOptionIndicator } from './SelectOptionIndicator';
 export { SelectOptionText } from './SelectOptionText';
 export { SelectPositioner } from './SelectPositioner';
-export { SelectSearchInput } from './SelectSearchInput';
+export { SelectSearchInput, type SelectSearchInputProps } from './SelectSearchInput';
 export { SelectSeparator, type SelectSeparatorProps } from './SelectSeparator';
 export type { SelectDataItem } from './types';

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

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 export type SelectionBulkBarPlacement = 'floating' | 'absolute';
 export interface SelectionBulkBarProps {
     /** Override the toolbar accessible name. Defaults to "Bulk actions". */

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

@@ -1,17 +1,56 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
 import { Portal } from "@ark-ui/react/portal";
 import { Presence } from "@ark-ui/react/presence";
 import { useTestId } from "../../../utils/testId.js";
+import { BulkBarSummary, BulkBarSummaryClear, BulkBarSummaryCount, BulkBarSummarySelectAll, BulkBarSummarySeparator } from "../../BulkBar/index.js";
 import { HStack } from "../../Stack/index.js";
 import { selectionBulkBarVariants } from "../classes.js";
 import { useSelectionContext } from "../useSelectionContext.js";
-import { SelectionBulkBarSummary } from "./SelectionBulkBarSummary.js";
 const TEST_ID_SLOT = 'bulk-bar';
 const DEFAULT_ARIA_LABEL = 'Bulk actions';
+const partitionChildren = (children)=>{
+    let summary;
+    const actions = [];
+    for (const child of Children.toArray(children)){
+        if (/*#__PURE__*/ isValidElement(child) && child.type === BulkBarSummary && !summary) {
+            summary = child;
+            continue;
+        }
+        actions.push(child);
+    }
+    return {
+        summary,
+        actions
+    };
+};
+const DefaultSummary = ()=>{
+    const { selectedIds, isAllSelected, selectAll, clear } = useSelectionContext();
+    return /*#__PURE__*/ jsxs(BulkBarSummary, {
+        children: [
+            /*#__PURE__*/ jsx(BulkBarSummaryCount, {
+                count: selectedIds.size
+            }),
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 6,
+                children: [
+                    /*#__PURE__*/ jsx(BulkBarSummarySelectAll, {
+                        onClick: selectAll,
+                        disabled: isAllSelected
+                    }),
+                    /*#__PURE__*/ jsx(BulkBarSummarySeparator, {}),
+                    /*#__PURE__*/ jsx(BulkBarSummaryClear, {
+                        onClick: clear
+                    })
+                ]
+            })
+        ]
+    });
+};
 const SelectionBulkBar = ({ 'aria-label': ariaLabel = DEFAULT_ARIA_LABEL, 'data-testid': testIdProp, placement = 'floating', children })=>{
     const { selectedIds } = useSelectionContext();
-    const fallbackTestId = useTestId(TEST_ID_SLOT);
-    const testId = testIdProp ?? fallbackTestId;
+    const testId = useTestId(TEST_ID_SLOT, testIdProp);
+    const { summary, actions } = partitionChildren(children);
     const bar = /*#__PURE__*/ jsx(Presence, {
         present: selectedIds.size > 0,
         asChild: true,
@@ -24,11 +63,11 @@ const SelectionBulkBar = ({ 'aria-label': ariaLabel = DEFAULT_ARIA_LABEL, 'data-
                 placement
             }),
             children: [
-                /*#__PURE__*/ jsx(SelectionBulkBarSummary, {}),
+                summary ?? /*#__PURE__*/ jsx(DefaultSummary, {}),
                 /*#__PURE__*/ jsx(HStack, {
                     gap: 8,
                     align: "center",
-                    children: children
+                    children: actions
                 })
             ]
         })