@wallarm-org/design-system 0.62.0 → 0.63.0

package/dist/components/CodeSnippet/InlineCodeSnippet.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { useCopyTooltip } from "../../hooks/index.js";
@@ -19,25 +20,31 @@ const inlineCodeSnippetVariants = cva("inline-flex items-center code-snippet-bg
     }
 });
 const InlineCodeSnippet = (props)=>{
-    const { code, size = 'inherit', asChild = false, copyable = true, className, onClick, ref, ...otherProps } = props;
+    const { code, size = 'inherit', asChild = false, copyable = true, className, onClick, ref, children, ...otherProps } = props;
     const { copied, tooltipOpen, onTooltipOpenChange, handleCopy } = useCopyTooltip({
         text: code,
         enabled: copyable
     });
-    const Comp = asChild ? Slot : 'code';
     const handleClick = (event)=>{
-        handleCopy(event);
+        handleCopy();
         onClick?.(event);
     };
-    const codeElement = /*#__PURE__*/ jsx(Comp, {
-        ref: ref,
-        "data-slot": "inline-code-snippet",
+    const sharedProps = {
+        ref,
+        'data-slot': 'inline-code-snippet',
+        'data-ds-suppress-parent-click': copyable ? '' : void 0,
         className: cn(inlineCodeSnippetVariants({
             size,
             copyable
         }), className),
         ...otherProps,
-        onClick: handleClick,
+        onClick: handleClick
+    };
+    const codeElement = asChild && /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ jsx(Slot, {
+        ...sharedProps,
+        children: /*#__PURE__*/ cloneElement(children, {}, code)
+    }) : /*#__PURE__*/ jsx("code", {
+        ...sharedProps,
         children: code
     });
     if (!copyable) return codeElement;

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

@@ -10,11 +10,12 @@ export { CodeSnippetFullscreenButton, type CodeSnippetFullscreenButtonProps, } f
 export { CodeSnippetHeader, type CodeSnippetHeaderProps } from './CodeSnippetHeader';
 export { CodeSnippetLineNumbers, type CodeSnippetLineNumbersProps } from './CodeSnippetLineNumbers';
 export { CodeSnippetRoot, type CodeSnippetRootProps } from './CodeSnippetRoot';
+export { CodeSnippetShowMoreButton, type CodeSnippetShowMoreButtonProps, } from './CodeSnippetShowMoreButton';
 export { CodeSnippetTab, type CodeSnippetTabProps } from './CodeSnippetTab';
 export { CodeSnippetTabs, type CodeSnippetTabsProps } from './CodeSnippetTabs';
 export { CodeSnippetTitle, type CodeSnippetTitleProps } from './CodeSnippetTitle';
 export { CodeSnippetWrapButton, type CodeSnippetWrapButtonProps } from './CodeSnippetWrapButton';
 export { useAdapter, useCodeSnippet } from './hooks';
 export { InlineCodeSnippet, type InlineCodeSnippetProps } from './InlineCodeSnippet';
-export { type FoldRegion } from './lib/foldUtils';
+export { type FoldButtonProps, type FoldRegion } from './lib/foldUtils';
 export { getHttpFolds, HTTP_FOLD_ID, type HttpFoldOptions, type HttpFoldSectionOptions, } from './lib/httpFolds';

package/dist/components/CodeSnippet/index.js

@@ -8,6 +8,7 @@ import { CodeSnippetFullscreenButton } from "./CodeSnippetFullscreenButton.js";
 import { CodeSnippetHeader } from "./CodeSnippetHeader.js";
 import { CodeSnippetLineNumbers } from "./CodeSnippetLineNumbers.js";
 import { CodeSnippetRoot } from "./CodeSnippetRoot.js";
+import { CodeSnippetShowMoreButton } from "./CodeSnippetShowMoreButton.js";
 import { CodeSnippetTab } from "./CodeSnippetTab.js";
 import { CodeSnippetTabs } from "./CodeSnippetTabs.js";
 import { CodeSnippetTitle } from "./CodeSnippetTitle.js";
@@ -15,4 +16,4 @@ import { CodeSnippetWrapButton } from "./CodeSnippetWrapButton.js";
 import { useAdapter, useCodeSnippet } from "./hooks/index.js";
 import { InlineCodeSnippet } from "./InlineCodeSnippet.js";
 import { HTTP_FOLD_ID, getHttpFolds } from "./lib/httpFolds.js";
-export { CodeSnippetActions, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetFullscreenButton, CodeSnippetHeader, CodeSnippetLineNumbers, CodeSnippetRoot, CodeSnippetTab, CodeSnippetTabs, CodeSnippetTitle, CodeSnippetWrapButton, HTTP_FOLD_ID, InlineCodeSnippet, getHttpFolds, loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter, useAdapter, useCodeSnippet };
+export { CodeSnippetActions, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetFullscreenButton, CodeSnippetHeader, CodeSnippetLineNumbers, CodeSnippetRoot, CodeSnippetShowMoreButton, CodeSnippetTab, CodeSnippetTabs, CodeSnippetTitle, CodeSnippetWrapButton, HTTP_FOLD_ID, InlineCodeSnippet, getHttpFolds, loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter, useAdapter, useCodeSnippet };

package/dist/components/CodeSnippet/internal/FoldToggle.js

@@ -1,17 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import { ChevronDown } from "../../../icons/ChevronDown.js";
 import { ChevronRight } from "../../../icons/ChevronRight.js";
+import { cn } from "../../../utils/cn.js";
 import { getFoldSummaryLabel } from "../lib/foldUtils.js";
 const FoldToggle = ({ fold, isCollapsed, onToggle })=>{
     const lineCount = fold.endLine - fold.startLine + 1;
     const label = getFoldSummaryLabel(fold, lineCount);
     const ariaLabel = isCollapsed ? `Expand ${label}` : `Collapse ${label}`;
+    const { className, onClick, ...toggleProps } = fold.toggleProps ?? {};
+    const handleClick = (event)=>{
+        onToggle();
+        onClick?.(event);
+    };
     return /*#__PURE__*/ jsx("button", {
         type: "button",
-        className: "flex items-center justify-center w-16 h-16 rounded-2 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer",
+        className: cn('flex items-center justify-center w-16 h-16 rounded-2 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer', className),
         "aria-expanded": !isCollapsed,
         "aria-label": ariaLabel,
-        onClick: onToggle,
+        ...toggleProps,
+        onClick: handleClick,
         children: isCollapsed ? /*#__PURE__*/ jsx(ChevronRight, {}) : /*#__PURE__*/ jsx(ChevronDown, {})
     });
 };

package/dist/components/CodeSnippet/lib/foldUtils.d.ts

@@ -1,3 +1,5 @@
+import type { ButtonHTMLAttributes } from 'react';
+export type FoldButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
 export type FoldRegion = {
     /** Unique identifier for this fold region */
     id: string;
@@ -9,6 +11,10 @@ export type FoldRegion = {
     label?: string;
     /** Whether the fold starts collapsed. Default: false */
     defaultCollapsed?: boolean;
+    /** Props forwarded to the fold gutter toggle button. */
+    toggleProps?: FoldButtonProps;
+    /** Props forwarded to the collapsed fold summary button. */
+    summaryProps?: FoldButtonProps;
 };
 export type DisplayItem = {
     type: 'line';

package/dist/components/DateRangeInput/DateRangeEndValue.d.ts

@@ -1,7 +1,14 @@
-import type { FC } from 'react';
+import type { FC, HTMLAttributes } from 'react';
+import type { TestableProps } from '../../utils/testId';
+export interface DateRangeEndValueProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'>, TestableProps {
+}
 /**
  * Renders the end date/time input field for a date range.
  * Must be used within `DateRangeProvider` — `useDateRangeContext` will throw
  * if rendered outside.
+ *
+ * Arbitrary HTML attributes (`data-analytics-id`, `data-analytics-props`,
+ * `data-testid`, `aria-*`, `id`, event handlers) land on the field's
+ * wrapper `<div>`, giving consumers a per-field analytics seam.
  */
-export declare const DateRangeEndValue: FC;
+export declare const DateRangeEndValue: FC<DateRangeEndValueProps>;

package/dist/components/DateRangeInput/DateRangeEndValue.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
 import { DateRangeSegmentGroup } from "./DateRangeSegmentGroup.js";
-const DateRangeEndValue = ()=>{
+const DateRangeEndValue = (props)=>{
     const { endFieldProps, endRef } = useDateRangeContext();
     return /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
         ...endFieldProps,
         ref: endRef,
-        type: "end"
+        type: "end",
+        wrapperHtmlProps: props
     });
 };
 DateRangeEndValue.displayName = 'DateRangeEndValue';

package/dist/components/DateRangeInput/DateRangeSegmentGroup.d.ts

@@ -1,9 +1,20 @@
-import { type FC, type Ref } from 'react';
+import { type FC, type HTMLAttributes, type Ref } from 'react';
 import type { AriaDatePickerProps, DateValue } from '@react-types/datepicker';
 export interface DateRangeSegmentGroupProps extends AriaDatePickerProps<DateValue> {
     type: 'start' | 'end';
     /** Called when partial value presence changes (any editable segment is filled). */
     onHasPartialValueChange?: (hasPartialValue: boolean) => void;
     ref?: Ref<HTMLDivElement>;
+    /**
+     * Consumer HTML attributes (e.g. `data-analytics-id`, `data-analytics-props`,
+     * `data-testid`, `aria-*`, `id`) that land on the field's wrapper `<div>`.
+     * Provides the per-field analytics seam used by `DateRangeStartValue` and
+     * `DateRangeEndValue` in the compound API.
+     */
+    wrapperHtmlProps?: HTMLAttributes<HTMLDivElement> & {
+        'data-testid'?: string;
+        'data-analytics-id'?: string;
+        'data-analytics-props'?: string;
+    };
 }
 export declare const DateRangeSegmentGroup: FC<DateRangeSegmentGroupProps>;

package/dist/components/DateRangeInput/DateRangeSegmentGroup.js

@@ -8,7 +8,7 @@ import { useDateFieldState } from "@react-stately/datepicker";
 import { cn } from "../../utils/cn.js";
 import { TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
-const DateRangeSegmentGroup = ({ type, onHasPartialValueChange, ref, ...props })=>{
+const DateRangeSegmentGroup = ({ type, onHasPartialValueChange, ref, wrapperHtmlProps, ...props })=>{
     const { state: rangeState, disabled = false, error = false, readOnly = false, showTimeDropdown, timeStep = 30, hourCycle, icon } = useDateRangeContext();
     const { locale } = useLocale();
     const dropdownRef = useRef(null);
@@ -62,12 +62,30 @@ const DateRangeSegmentGroup = ({ type, onHasPartialValueChange, ref, ...props })
     });
     const currentTimeValue = fieldState.value && hasTimeSegments ? fieldState.value : null;
     const hasIcon = Boolean(icon);
+    const { className: consumerClassName, onClick: consumerOnClick, onFocus: consumerOnFocus, onBlur: consumerOnBlur, onKeyDownCapture: consumerOnKeyDownCapture, ...consumerWrapperRest } = wrapperHtmlProps ?? {};
+    const composedOnClick = (event)=>{
+        consumerOnClick?.(event);
+        if (!event.defaultPrevented) handleClick();
+    };
+    const composedOnFocus = (event)=>{
+        consumerOnFocus?.(event);
+        if (!event.defaultPrevented) handleContainerFocus();
+    };
+    const composedOnBlur = (event)=>{
+        consumerOnBlur?.(event);
+        if (!event.defaultPrevented) handleContainerBlur(event);
+    };
+    const composedOnKeyDownCapture = (event)=>{
+        consumerOnKeyDownCapture?.(event);
+        if (!event.defaultPrevented) handleKeyDownCapture(event);
+    };
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('relative h-full', !hasIcon && 'start' === type && 'pl-12'),
-        onKeyDownCapture: handleKeyDownCapture,
-        onClick: handleClick,
-        onFocus: handleContainerFocus,
-        onBlur: handleContainerBlur,
+        ...consumerWrapperRest,
+        className: cn('relative h-full', !hasIcon && 'start' === type && 'pl-12', consumerClassName),
+        onKeyDownCapture: composedOnKeyDownCapture,
+        onClick: composedOnClick,
+        onFocus: composedOnFocus,
+        onBlur: composedOnBlur,
         children: [
             /*#__PURE__*/ jsx(TemporalSegmentGroup, {
                 ...fieldProps,

package/dist/components/DateRangeInput/DateRangeStartValue.d.ts

@@ -1,14 +1,21 @@
-import type { FC } from 'react';
+import type { FC, HTMLAttributes } from 'react';
+import type { TestableProps } from '../../utils/testId';
+export interface DateRangeStartValueProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'>, TestableProps {
+}
 /**
  * Renders the start date/time input field for a date range.
  * Must be used within `DateRangeProvider` — `useDateRangeContext` will throw
  * if rendered outside.
  *
+ * Arbitrary HTML attributes (`data-analytics-id`, `data-analytics-props`,
+ * `data-testid`, `aria-*`, `id`, event handlers) land on the field's
+ * wrapper `<div>`, giving consumers a per-field analytics seam.
+ *
  * @example
  * <DateRangeProvider value={range} onChange={setRange}>
- *   <DateRangeStartValue />
+ *   <DateRangeStartValue data-analytics-id='RANGE_START' />
  *   <DateRangeSeparator />
- *   <DateRangeEndValue />
+ *   <DateRangeEndValue data-analytics-id='RANGE_END' />
  * </DateRangeProvider>
  */
-export declare const DateRangeStartValue: FC;
+export declare const DateRangeStartValue: FC<DateRangeStartValueProps>;

package/dist/components/DateRangeInput/DateRangeStartValue.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
 import { DateRangeSegmentGroup } from "./DateRangeSegmentGroup.js";
-const DateRangeStartValue = ()=>{
+const DateRangeStartValue = (props)=>{
     const { startFieldProps, startRef } = useDateRangeContext();
     return /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
         ...startFieldProps,
         ref: startRef,
-        type: "start"
+        type: "start",
+        wrapperHtmlProps: props
     });
 };
 DateRangeStartValue.displayName = 'DateRangeStartValue';

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

@@ -1,6 +1,6 @@
 export { DateRangeProvider, useDateRangeContext } from './DateRangeContext';
-export { DateRangeEndValue } from './DateRangeEndValue';
+export { DateRangeEndValue, type DateRangeEndValueProps } from './DateRangeEndValue';
 export { DateRangeInput } from './DateRangeInput';
 export { DateRangeSeparator } from './DateRangeSeparator';
-export { DateRangeStartValue } from './DateRangeStartValue';
+export { DateRangeStartValue, type DateRangeStartValueProps } from './DateRangeStartValue';
 export type { DateRangeInputProps } from './types';

package/dist/components/Drawer/Drawer.d.ts

@@ -1,4 +1,5 @@
 import type { FC, ReactNode } from 'react';
+import type { DialogInteractOutsideEvent as DrawerInteractOutsideEvent } from '@ark-ui/react/dialog';
 import { type TestableProps } from '../../utils/testId';
 export interface DrawerProps extends TestableProps {
     children: ReactNode;
@@ -20,5 +21,9 @@ export interface DrawerProps extends TestableProps {
     minWidth?: number;
     /** Maximum width in pixels */
     maxWidth?: number;
+    /** Fired when the user interacts outside the drawer (e.g. clicks the backdrop). */
+    onInteractOutside?: (event: DrawerInteractOutsideEvent) => void;
+    /** Fired when the user presses the Escape key while the drawer is open. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }
 export declare const Drawer: FC<DrawerProps>;

package/dist/components/Drawer/Drawer.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { TestIdProvider } from "../../utils/testId.js";
 import { DrawerProvider } from "./DrawerContext/index.js";
 import { DrawerRoot } from "./DrawerRoot.js";
-const Drawer = ({ children, open, onOpenChange, closeOnEscape = true, closeOnOutsideClick = true, overlay = true, modal = true, width, minWidth, maxWidth, 'data-testid': testId })=>/*#__PURE__*/ jsx(DrawerProvider, {
+const Drawer = ({ children, open, onOpenChange, closeOnEscape = true, closeOnOutsideClick = true, overlay = true, modal = true, width, minWidth, maxWidth, onInteractOutside, onEscapeKeyDown, 'data-testid': testId })=>/*#__PURE__*/ jsx(DrawerProvider, {
         open: open,
         onOpenChange: onOpenChange,
         closeOnEscape: closeOnEscape,
@@ -15,6 +15,8 @@ const Drawer = ({ children, open, onOpenChange, closeOnEscape = true, closeOnOut
             closeOnEscape: closeOnEscape,
             closeOnOutsideClick: closeOnOutsideClick,
             modal: modal,
+            onInteractOutside: onInteractOutside,
+            onEscapeKeyDown: onEscapeKeyDown,
             children: /*#__PURE__*/ jsx(TestIdProvider, {
                 value: testId,
                 children: children

package/dist/components/Drawer/DrawerClose.d.ts

@@ -1,5 +1,6 @@
-import type { FC, ReactNode, Ref } from 'react';
-export interface DrawerCloseProps {
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface DrawerCloseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
     children?: ReactNode;
     /** Render as child component */
     asChild?: boolean;

package/dist/components/Drawer/DrawerClose.js

@@ -6,15 +6,17 @@ import { Button } from "../Button/index.js";
 import { Kbd } from "../Kbd/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 import { useDrawerContext } from "./DrawerContext/index.js";
-const DrawerClose = ({ children, asChild = false, ref })=>{
-    const testId = useTestId('close');
+const DrawerClose = ({ children, asChild = false, ref, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('close', testIdProp);
     const { closeOnEscape } = useDrawerContext();
     const handleFocusCapture = (event)=>{
         event.stopPropagation();
     };
     if (asChild) return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        ...rest,
         ref: ref,
         asChild: true,
+        "data-testid": testIdProp,
         children: children
     });
     return /*#__PURE__*/ jsxs(Tooltip, {
@@ -26,11 +28,12 @@ const DrawerClose = ({ children, asChild = false, ref })=>{
                     onFocusCapture: handleFocusCapture,
                     children: /*#__PURE__*/ jsx(Button, {
                         ref: ref,
-                        "data-testid": testId,
                         variant: "ghost",
                         color: "neutral",
                         size: "small",
                         "aria-label": "Close drawer",
+                        ...rest,
+                        "data-testid": testId,
                         children: children || /*#__PURE__*/ jsx(X, {})
                     })
                 })

package/dist/components/Drawer/DrawerHeader.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode, Ref } from 'react';
+import { type FC, type ReactNode, type Ref } from 'react';
 export interface DrawerHeaderProps {
     children: ReactNode;
     ref?: Ref<HTMLDivElement>;

package/dist/components/Drawer/DrawerHeader.js

@@ -1,9 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { DrawerClose } from "./DrawerClose.js";
+const isDrawerClose = (child)=>/*#__PURE__*/ isValidElement(child) && child.type === DrawerClose;
 const DrawerHeader = ({ children, ref })=>{
     const testId = useTestId('header');
+    const hasExplicitClose = Children.toArray(children).some(isDrawerClose);
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         "data-testid": testId,
@@ -11,7 +14,7 @@ const DrawerHeader = ({ children, ref })=>{
         className: cn('relative shrink-0 w-full', 'bg-bg-surface-2', 'flex items-start justify-between gap-12', 'pt-16 pb-12 pl-24 pr-16', 'rounded-t-12', 'outline-none'),
         children: [
             children,
-            /*#__PURE__*/ jsx(DrawerClose, {})
+            !hasExplicitClose && /*#__PURE__*/ jsx(DrawerClose, {})
         ]
     });
 };

package/dist/components/Drawer/DrawerResizeHandle.d.ts

@@ -1,5 +1,10 @@
-import { type FC, type Ref } from 'react';
-export interface DrawerResizeHandleProps {
+import { type ButtonHTMLAttributes, type FC, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface DrawerResizeHandleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
     ref?: Ref<HTMLButtonElement>;
+    /** Fired when the user starts dragging the resize handle. */
+    onResizeStart?: () => void;
+    /** Fired when the user releases the resize handle, with the final pixel width. */
+    onResizeEnd?: (width: number) => void;
 }
 export declare const DrawerResizeHandle: FC<DrawerResizeHandleProps>;

package/dist/components/Drawer/DrawerResizeHandle.js

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { throttle } from "lodash-es";
 import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 import { useDrawerContext } from "./DrawerContext/index.js";
 const drawerResizeHandleVariants = cva(cn('absolute left-0 top-0 bottom-0 z-1', '-translate-x-1/2', 'w-12 py-12', 'outline-none cursor-col-resize', 'flex items-center justify-center', 'before:content-[""]', 'before:block', 'before:w-3 before:h-full', 'before:rounded-full', 'before:bg-bg-fill-brand', 'before:transition-opacity before:duration-150'), {
@@ -13,33 +14,54 @@ const drawerResizeHandleVariants = cva(cn('absolute left-0 top-0 bottom-0 z-1',
         }
     }
 });
-const DrawerResizeHandle = ({ ref })=>{
+const DrawerResizeHandle = ({ ref, 'data-testid': testIdProp, onResizeStart, onResizeEnd, onMouseEnter, onMouseLeave, onMouseDown, className, ...rest })=>{
     const { setWidth, setIsResizing, minWidth, maxWidth } = useDrawerContext();
+    const testId = useTestId('resize-handle', testIdProp);
     const [isHovered, setIsHovered] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const dragStateRef = useRef({
         startX: 0,
-        startWidth: 0
+        startWidth: 0,
+        currentWidth: 0
     });
-    const handleMouseEnter = ()=>setIsHovered(true);
-    const handleMouseLeave = ()=>setIsHovered(false);
+    const onResizeEndRef = useRef(onResizeEnd);
+    useEffect(()=>{
+        onResizeEndRef.current = onResizeEnd;
+    }, [
+        onResizeEnd
+    ]);
+    const handleMouseEnter = (e)=>{
+        onMouseEnter?.(e);
+        if (e.defaultPrevented) return;
+        setIsHovered(true);
+    };
+    const handleMouseLeave = (e)=>{
+        onMouseLeave?.(e);
+        if (e.defaultPrevented) return;
+        setIsHovered(false);
+    };
     const handleMouseDown = (e)=>{
+        onMouseDown?.(e);
+        if (e.defaultPrevented) return;
         e.preventDefault();
         const drawerContent = e.currentTarget.closest('[role="dialog"]');
         if (!drawerContent) return;
         const currentWidth = drawerContent.offsetWidth;
         dragStateRef.current = {
             startX: e.clientX,
-            startWidth: currentWidth
+            startWidth: currentWidth,
+            currentWidth
         };
         setIsDragging(true);
         setIsResizing(true);
+        onResizeStart?.();
     };
     const handleMouseMove = useMemo(()=>throttle((e)=>{
             const { startX, startWidth } = dragStateRef.current;
             const delta = startX - e.clientX;
             const newWidth = Math.min(Math.max(startWidth + delta, minWidth), maxWidth);
             setWidth(newWidth);
+            dragStateRef.current.currentWidth = newWidth;
         }, 16), [
         minWidth,
         maxWidth,
@@ -51,6 +73,7 @@ const DrawerResizeHandle = ({ ref })=>{
             setIsDragging(false);
             setIsResizing(false);
             handleMouseMove.cancel();
+            onResizeEndRef.current?.(dragStateRef.current.currentWidth);
         };
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
@@ -72,12 +95,14 @@ const DrawerResizeHandle = ({ ref })=>{
         open: isHovered && !isDragging,
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
+                ...rest,
                 ref: ref,
                 "data-slot": "resize-handle",
                 "data-resizing": isDragging || void 0,
+                "data-testid": testId,
                 className: cn(drawerResizeHandleVariants({
                     barIsVisible
-                })),
+                }), className),
                 onMouseEnter: handleMouseEnter,
                 onMouseLeave: handleMouseLeave,
                 onMouseDown: handleMouseDown

package/dist/components/Drawer/DrawerRoot.d.ts

@@ -1,9 +1,12 @@
 import type { FC, ReactNode } from 'react';
+import { type DialogInteractOutsideEvent as DrawerInteractOutsideEvent } from '@ark-ui/react/dialog';
 interface DrawerRootProps {
     children: ReactNode;
     closeOnEscape: boolean;
     closeOnOutsideClick: boolean;
     modal: boolean;
+    onInteractOutside?: (event: DrawerInteractOutsideEvent) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }
 export declare const DrawerRoot: FC<DrawerRootProps>;
 export {};

package/dist/components/Drawer/DrawerRoot.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@ark-ui/react/dialog";
 import { useDrawerContext } from "./DrawerContext/index.js";
-const DrawerRoot = ({ children, closeOnEscape, closeOnOutsideClick, modal })=>{
+const DrawerRoot = ({ children, closeOnEscape, closeOnOutsideClick, modal, onInteractOutside, onEscapeKeyDown })=>{
     const { isOpen, onOpenChange } = useDrawerContext();
     const handleOpenChange = ({ open })=>{
         onOpenChange(open);
@@ -12,6 +12,8 @@ const DrawerRoot = ({ children, closeOnEscape, closeOnOutsideClick, modal })=>{
         closeOnEscape: closeOnEscape,
         closeOnInteractOutside: closeOnOutsideClick,
         modal: modal,
+        onInteractOutside: onInteractOutside,
+        onEscapeKeyDown: onEscapeKeyDown,
         lazyMount: true,
         unmountOnExit: true,
         children: children

package/dist/components/Drawer/DrawerTrigger.d.ts

@@ -1,5 +1,6 @@
-import type { FC, ReactNode, Ref } from 'react';
-export interface DrawerTriggerProps {
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface DrawerTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
     children: ReactNode;
     /** Render as child component */
     asChild?: boolean;

package/dist/components/Drawer/DrawerTrigger.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@ark-ui/react/dialog";
 import { useTestId } from "../../utils/testId.js";
-const DrawerTrigger = ({ children, asChild = false, ref })=>{
-    const testId = useTestId('trigger');
+const DrawerTrigger = ({ children, asChild = false, ref, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('trigger', testIdProp);
     return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ...rest,
         ref: ref,
         "data-testid": testId,
         asChild: asChild,

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

@@ -1,3 +1,4 @@
+export type { DialogInteractOutsideEvent as DrawerInteractOutsideEvent } from '@ark-ui/react/dialog';
 export { drawerContentVariants, drawerPositionerVariants } from './classes';
 export { Drawer, type DrawerProps } from './Drawer';
 export { DrawerBody, type DrawerBodyProps } from './DrawerBody';

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

@@ -1,8 +1,9 @@
 import { type FC, type HTMLAttributes, type Ref } from 'react';
 import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
 import { dropdownMenuItemVariants } from './classes';
 type DropdownMenuCheckboxItemVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
-export interface DropdownMenuCheckboxItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuCheckboxItemVariantsProps {
+export interface DropdownMenuCheckboxItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuCheckboxItemVariantsProps, TestableProps {
     checked: boolean;
     onCheckedChange?: (checked: boolean) => void;
     /** Optional — auto-generated via useId() if omitted */

package/dist/components/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -6,9 +6,9 @@ import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuItemVariants } from "./classes.js";
 import { DropdownMenuItemIndicator } from "./DropdownMenuItemIndicator.js";
-const DropdownMenuCheckboxItem = ({ children, checked, onCheckedChange, value, disabled, closeOnSelect, variant = 'default', className, ...props })=>{
+const DropdownMenuCheckboxItem = ({ children, checked, onCheckedChange, value, disabled, closeOnSelect, variant = 'default', className, 'data-testid': testIdProp, ...props })=>{
     const autoId = useId();
-    const testId = useTestId('checkbox-item');
+    const testId = useTestId('checkbox-item', testIdProp);
     return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
         ...props,
         value: value ?? autoId,

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

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

package/dist/components/DropdownMenu/DropdownMenuContextTrigger.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@ark-ui/react/menu";
 import { useTestId } from "../../utils/testId.js";
-const DropdownMenuContextTrigger = ({ variant = 'default', inset = false, children, ...props })=>{
-    const testId = useTestId('context-trigger');
+const DropdownMenuContextTrigger = ({ children, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('context-trigger', testIdProp);
     return /*#__PURE__*/ jsx(Menu.ContextTrigger, {
         ...props,
         "data-testid": testId,

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

@@ -1,8 +1,9 @@
 import { type FC, type HTMLAttributes, type Ref } from 'react';
 import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
 import { dropdownMenuItemVariants } from './classes';
 export type DropdownMenuItemVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
-export interface DropdownMenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuItemVariantsProps {
+export interface DropdownMenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'>, DropdownMenuItemVariantsProps, TestableProps {
     inset?: boolean;
     disabled?: boolean;
     onSelect?: () => void;