@wallarm-org/design-system 0.62.0 → 0.64.0-rc-feature-WDS-73-empty.1

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -99,7 +99,7 @@ const AnimatedBackground = (props)=>{
         "data-slot": "animated-background",
         ...rest,
         ref: ref,
-        className: cn('relative', className),
+        className: cn('relative h-full w-full', className),
         children: [
             /*#__PURE__*/ jsx("canvas", {
                 ref: canvasRef,

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -34,6 +34,7 @@ const BreadcrumbsItem = ({ className, isCurrent = false, href, children, onClick
     return /*#__PURE__*/ jsx("li", {
         children: isLink ? /*#__PURE__*/ jsx("a", {
             href: href,
+            onClick: onClick,
             className: commonClasses,
             "aria-label": ariaLabel,
             "data-testid": testId,

package/dist/components/BulkBar/BulkBarSummary.d.ts

@@ -1,17 +1,7 @@
-import type { FC, Ref } from 'react';
-export interface BulkBarSummaryProps {
-    count: number;
-    isAllSelected: boolean;
-    onSelectAll: () => void;
-    onClear: () => void;
-    /**
-     * When true, prevent the summary from wrapping or being truncated by the
-     * container: truncate the "X selected" text and keep the Select-all link on
-     * a single line. Use when the bar can shrink (e.g. inside a Drawer).
-     * Defaults to `false` — actions then rely on the parent for layout.
-     */
-    nowrap?: boolean;
-    'data-testid'?: string;
+import type { ComponentPropsWithoutRef, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface BulkBarSummaryProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'>, TestableProps {
+    children: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const BulkBarSummary: FC<BulkBarSummaryProps>;

package/dist/components/BulkBar/BulkBarSummary.js

@@ -1,50 +1,19 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-import { Link } from "../Link/index.js";
-import { HStack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-const BulkBarSummary = ({ count, isAllSelected, onSelectAll, onClear, nowrap = false, 'data-testid': testId, ref })=>/*#__PURE__*/ jsxs("div", {
-        ref: ref,
-        "data-slot": "bulk-bar-summary",
-        "data-testid": testId,
-        className: cn('flex items-center gap-16 p-8', nowrap && 'flex-nowrap whitespace-nowrap'),
-        children: [
-            /*#__PURE__*/ jsxs(Text, {
-                size: "sm",
-                color: "primary-alt",
-                weight: "medium",
-                truncate: nowrap,
-                children: [
-                    count,
-                    " selected"
-                ]
-            }),
-            /*#__PURE__*/ jsxs(HStack, {
-                gap: 6,
-                children: [
-                    /*#__PURE__*/ jsx(Link, {
-                        type: isAllSelected ? 'muted' : 'alt',
-                        size: "md",
-                        onClick: onSelectAll,
-                        disabled: isAllSelected,
-                        className: cn(nowrap && 'whitespace-nowrap'),
-                        children: "Select all"
-                    }),
-                    /*#__PURE__*/ jsx(Text, {
-                        size: "sm",
-                        color: "tertiary-alt",
-                        weight: "medium",
-                        children: "\xb7"
-                    }),
-                    /*#__PURE__*/ jsx(Link, {
-                        type: "alt",
-                        size: "md",
-                        onClick: onClear,
-                        children: "Clear"
-                    })
-                ]
-            })
-        ]
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+const BulkBarSummary = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('bulk-bar-summary', testIdProp);
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...rest,
+            ref: ref,
+            "data-slot": "bulk-bar-summary",
+            "data-testid": testId,
+            className: cn('flex items-center gap-16 p-8', className),
+            children: children
+        })
     });
+};
 BulkBarSummary.displayName = 'BulkBarSummary';
 export { BulkBarSummary };

package/dist/components/BulkBar/BulkBarSummaryClear.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface BulkBarSummaryClearProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'type'>, TestableProps {
+    children?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const BulkBarSummaryClear: FC<BulkBarSummaryClearProps>;

package/dist/components/BulkBar/BulkBarSummaryClear.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { linkVariants } from "../Link/index.js";
+const DEFAULT_LABEL = 'Clear';
+const BulkBarSummaryClear = ({ children, disabled = false, className, 'data-testid': testIdProp, ref, ...rest })=>{
+    const testId = useTestId('clear', testIdProp);
+    return /*#__PURE__*/ jsx("button", {
+        ...rest,
+        type: "button",
+        ref: ref,
+        disabled: disabled,
+        "data-slot": "bulk-bar-summary-clear",
+        "data-testid": testId,
+        className: cn(linkVariants({
+            type: 'alt',
+            size: 'md',
+            weight: 'regular',
+            disabled
+        }), 'whitespace-nowrap', className),
+        children: children ?? DEFAULT_LABEL
+    });
+};
+BulkBarSummaryClear.displayName = 'BulkBarSummaryClear';
+export { BulkBarSummaryClear };

package/dist/components/BulkBar/BulkBarSummaryCount.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import { Text } from '../Text';
+type TextOwnProps = Pick<ComponentPropsWithoutRef<typeof Text>, 'size' | 'color' | 'weight'>;
+export interface BulkBarSummaryCountProps extends Omit<ComponentPropsWithoutRef<'p'>, 'children' | 'color'>, TextOwnProps, TestableProps {
+    /** Renders the default "{count} selected" label. */
+    count?: number;
+    /** Override the entire content (e.g. "5 hosts" instead of "5 selected"). */
+    children?: ReactNode;
+    ref?: Ref<HTMLParagraphElement>;
+}
+export declare const BulkBarSummaryCount: FC<BulkBarSummaryCountProps>;
+export {};

package/dist/components/BulkBar/BulkBarSummaryCount.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+const BulkBarSummaryCount = ({ count, children, size = 'sm', color = 'primary-alt', weight = 'medium', 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('count', testIdProp);
+    return /*#__PURE__*/ jsx(Text, {
+        ...rest,
+        "data-slot": "bulk-bar-summary-count",
+        "data-testid": testId,
+        size: size,
+        color: color,
+        weight: weight,
+        truncate: true,
+        children: children ?? `${count ?? 0} selected`
+    });
+};
+BulkBarSummaryCount.displayName = 'BulkBarSummaryCount';
+export { BulkBarSummaryCount };

package/dist/components/BulkBar/BulkBarSummarySelectAll.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface BulkBarSummarySelectAllProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'type'>, TestableProps {
+    children?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const BulkBarSummarySelectAll: FC<BulkBarSummarySelectAllProps>;

package/dist/components/BulkBar/BulkBarSummarySelectAll.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { linkVariants } from "../Link/index.js";
+const DEFAULT_LABEL = 'Select all';
+const BulkBarSummarySelectAll = ({ children, disabled = false, className, 'data-testid': testIdProp, ref, ...rest })=>{
+    const testId = useTestId('select-all', testIdProp);
+    return /*#__PURE__*/ jsx("button", {
+        ...rest,
+        type: "button",
+        ref: ref,
+        disabled: disabled,
+        "data-slot": "bulk-bar-summary-select-all",
+        "data-testid": testId,
+        className: cn(linkVariants({
+            type: disabled ? 'muted' : 'alt',
+            size: 'md',
+            weight: 'regular',
+            disabled
+        }), 'whitespace-nowrap', className),
+        children: children ?? DEFAULT_LABEL
+    });
+};
+BulkBarSummarySelectAll.displayName = 'BulkBarSummarySelectAll';
+export { BulkBarSummarySelectAll };

package/dist/components/BulkBar/BulkBarSummarySeparator.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+/**
+ * Decorative middot between summary actions. No interactive role and no
+ * accessible content — screen readers should skip it. Place it inside an
+ * `<HStack gap={6}>` together with the surrounding action links to keep
+ * "Select all · Clear" reading as a single grouped phrase.
+ */
+export declare const BulkBarSummarySeparator: FC;

package/dist/components/BulkBar/BulkBarSummarySeparator.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+const BulkBarSummarySeparator = ()=>/*#__PURE__*/ jsx(Text, {
+        size: "sm",
+        color: "tertiary-alt",
+        weight: "medium",
+        "aria-hidden": "true",
+        "data-slot": "bulk-bar-summary-separator",
+        children: "\xb7"
+    });
+BulkBarSummarySeparator.displayName = 'BulkBarSummarySeparator';
+export { BulkBarSummarySeparator };

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

@@ -0,0 +1,5 @@
+export { BulkBarSummary, type BulkBarSummaryProps } from './BulkBarSummary';
+export { BulkBarSummaryClear, type BulkBarSummaryClearProps } from './BulkBarSummaryClear';
+export { BulkBarSummaryCount, type BulkBarSummaryCountProps } from './BulkBarSummaryCount';
+export { BulkBarSummarySelectAll, type BulkBarSummarySelectAllProps, } from './BulkBarSummarySelectAll';
+export { BulkBarSummarySeparator } from './BulkBarSummarySeparator';

package/dist/components/BulkBar/index.js

@@ -0,0 +1,6 @@
+import { BulkBarSummary } from "./BulkBarSummary.js";
+import { BulkBarSummaryClear } from "./BulkBarSummaryClear.js";
+import { BulkBarSummaryCount } from "./BulkBarSummaryCount.js";
+import { BulkBarSummarySelectAll } from "./BulkBarSummarySelectAll.js";
+import { BulkBarSummarySeparator } from "./BulkBarSummarySeparator.js";
+export { BulkBarSummary, BulkBarSummaryClear, BulkBarSummaryCount, BulkBarSummarySelectAll, BulkBarSummarySeparator };

package/dist/components/Calendar/CalendarPresetItem.d.ts

@@ -1,6 +1,7 @@
-import type { FC } from 'react';
+import type { ButtonHTMLAttributes, FC } from 'react';
+import type { TestableProps } from '../../utils/testId';
 import type { PresetValue } from './types';
-interface CalendarPresetItemProps {
+export interface CalendarPresetItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'type' | 'value'>, TestableProps {
     /** Display label for the preset */
     label: string;
     /** Preset value - dates array or named preset string */
@@ -13,6 +14,11 @@ interface CalendarPresetItemProps {
 /**
  * Individual preset item in the presets sidebar.
  * Triggers date selection when clicked without closing the calendar.
+ *
+ * Arbitrary HTML attributes (`data-analytics-id`, `data-analytics-props`,
+ * `data-testid`, `aria-*`, `id`, `onClick`) land on the rendered `<button>`.
+ * Consumer's `onClick` runs after the internal preset-selection logic
+ * (it cannot cancel the selection because the preset semantics are owned
+ * by the DS — consumers track *that* the preset was clicked).
  */
 export declare const CalendarPresetItem: FC<CalendarPresetItemProps>;
-export {};

package/dist/components/Calendar/CalendarPresetItem.js

@@ -2,20 +2,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker } from "@ark-ui/react";
 import { cn } from "../../utils/cn.js";
 import { useCalendarContext } from "./CalendarContext.js";
-const CalendarPresetItem = ({ label, value, shortcut, showShortcut = true })=>{
+const CalendarPresetItem = ({ label, value, shortcut, showShortcut = true, onClick: consumerOnClick, className, disabled: consumerDisabled, ...rest })=>{
     const { readonly } = useCalendarContext();
+    const isDisabled = readonly || consumerDisabled;
     return /*#__PURE__*/ jsx(DatePicker.Context, {
         children: (api)=>/*#__PURE__*/ jsxs("button", {
+                ...rest,
                 type: "button",
-                disabled: readonly,
-                onClick: ()=>{
-                    if (readonly) return;
+                disabled: isDisabled,
+                onClick: (event)=>{
+                    if (isDisabled) return;
                     if ('string' == typeof value) {
                         const rangeValue = api.getRangePresetValue(value);
                         api.setValue(rangeValue);
                     } else api.setValue(value);
+                    consumerOnClick?.(event);
                 },
-                className: cn('flex items-center justify-between', 'w-full px-8 py-6 rounded-6', 'font-sans font-normal text-sm leading-sm text-text-primary', 'select-none', 'transition-colors', 'outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', readonly ? 'cursor-default opacity-50' : 'cursor-pointer hover:bg-states-primary-hover active:bg-states-primary-pressed'),
+                className: cn('flex items-center justify-between', 'w-full px-8 py-6 rounded-6', 'font-sans font-normal text-sm leading-sm text-text-primary', 'select-none', 'transition-colors', 'outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', isDisabled ? 'cursor-default opacity-50' : 'cursor-pointer hover:bg-states-primary-hover active:bg-states-primary-pressed', className),
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         children: label

package/dist/components/Calendar/CalendarTrigger.d.ts

@@ -1,12 +1,21 @@
-import { type ReactNode } from 'react';
-export interface CalendarTriggerProps {
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+export interface CalendarTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'children' | 'color'>, TestableProps {
     /** Trigger element that opens the calendar popover */
     children: ReactNode;
     /** Additional props passed to the trigger wrapper */
     asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
 }
 /**
  * Trigger element that opens the calendar popover.
  * Wraps children with Ark UI DatePicker.Trigger.
+ *
+ * Arbitrary HTML attributes (`data-analytics-id`, `data-analytics-props`,
+ * `data-testid`, `aria-*`, `id`) are forwarded to Ark's Trigger and reach
+ * the final rendered child via `asChild` slot merge.
  */
-export declare const CalendarTrigger: import("react").ForwardRefExoticComponent<CalendarTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const CalendarTrigger: {
+    ({ children, asChild, ref, ...rest }: CalendarTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Calendar/CalendarTrigger.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { DatePicker } from "@ark-ui/react";
-const CalendarTrigger = /*#__PURE__*/ forwardRef(({ children, asChild = true }, ref)=>/*#__PURE__*/ jsx(DatePicker.Control, {
+const CalendarTrigger = ({ children, asChild = true, ref, ...rest })=>/*#__PURE__*/ jsx(DatePicker.Control, {
         children: /*#__PURE__*/ jsx(DatePicker.Trigger, {
+            ...rest,
             ref: ref,
             asChild: asChild,
             children: children
         })
-    }));
+    });
 CalendarTrigger.displayName = 'CalendarTrigger';
 export { CalendarTrigger };

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

@@ -11,7 +11,7 @@ export { CalendarGrids, type CalendarGridsProps } from './CalendarGrids';
 export { CalendarHeader } from './CalendarHeader';
 export { CalendarInputHeader, type CalendarInputHeaderProps } from './CalendarInputHeader';
 export { CalendarKeyboardHints, type CalendarKeyboardHintsProps } from './CalendarKeyboardHints';
-export { CalendarPresetItem } from './CalendarPresetItem';
+export { CalendarPresetItem, type CalendarPresetItemProps } from './CalendarPresetItem';
 export { CalendarPresets, type CalendarPresetsProps } from './CalendarPresets';
 export { CalendarResetButton, type CalendarResetButtonProps } from './CalendarResetButton';
 export { CalendarTrigger, type CalendarTriggerProps } from './CalendarTrigger';

package/dist/components/Card/Card.js

@@ -11,6 +11,8 @@ const Card = ({ ref, color = 'primary', asChild = false, disabled = false, class
         if (!props.onClick) return;
         const target = e.target;
         const card = e.currentTarget;
+        const suppressor = target.closest('[data-ds-suppress-parent-click]');
+        if (suppressor && card.contains(suppressor)) return;
         if (target !== card && target.closest(INTERACTIVE_SELECTORS) !== card) return;
         props.onClick(e);
     };

package/dist/components/CodeSnippet/CodeSnippetCode.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { useCodeSnippet } from "./hooks/index.js";
 import { CodeContent, CodeLine, TokenizedCodeLine } from "./internal/index.js";
@@ -22,6 +23,11 @@ const CodeSnippetCode = ({ className, ...props })=>{
     };
     const renderFoldSummary = (item)=>{
         const label = getFoldSummaryLabel(item.fold, item.lineCount);
+        const { className: summaryClassName, onClick: consumerOnClick, ...summaryProps } = item.fold.summaryProps ?? {};
+        const handleSummaryClick = (event)=>{
+            toggleFold(item.fold.id);
+            consumerOnClick?.(event);
+        };
         return /*#__PURE__*/ jsx(CodeLine, {
             lineConfig: void 0,
             lineHeightClass: lineHeightClass,
@@ -33,10 +39,11 @@ const CodeSnippetCode = ({ className, ...props })=>{
             hasFolds: inlineGutter && hasFolds,
             children: /*#__PURE__*/ jsx("button", {
                 type: "button",
-                className: "inline-flex items-center cursor-pointer select-none",
+                className: cn('inline-flex items-center cursor-pointer select-none', summaryClassName),
                 "aria-expanded": false,
                 "aria-label": `Collapsed region: ${label}, ${item.lineCount} lines`,
-                onClick: ()=>toggleFold(item.fold.id),
+                ...summaryProps,
+                onClick: handleSummaryClick,
                 children: /*#__PURE__*/ jsx("span", {
                     className: "inline-flex items-center italic text-text-secondary hover:text-text-primary transition-colors",
                     children: label

package/dist/components/CodeSnippet/CodeSnippetCopyButton.js

@@ -12,7 +12,7 @@ const CodeSnippetCopyButton = ({ onClick, ref, ...props })=>{
         text: code
     });
     const handleClick = (event)=>{
-        handleCopy(event);
+        handleCopy();
         onClick?.(event);
     };
     return /*#__PURE__*/ jsxs(Tooltip, {

package/dist/components/CodeSnippet/CodeSnippetFullscreenButton.js

@@ -10,7 +10,6 @@ const CodeSnippetFullscreenButton = ({ onClick, ref, ...props })=>{
     const testId = useTestId('fullscreen-button');
     const { isFullscreen, setIsFullscreen } = useCodeSnippet();
     const handleClick = (event)=>{
-        event.stopPropagation();
         setIsFullscreen(!isFullscreen);
         onClick?.(event);
     };

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

@@ -20,7 +20,11 @@ export type CodeSnippetRootProps<TLanguage extends string = string> = CodeSnippe
     startingLineNumber?: number;
     /** Enable line wrapping */
     wrapLines?: boolean;
-    /** Max lines before collapsing (for ShowMore) */
+    /**
+     * Max lines before collapsing.
+     * Root auto-renders the default show-more button unless a direct
+     * `CodeSnippetShowMoreButton` child is provided for button-level props.
+     */
     maxLines?: number;
     /** Foldable regions that can be collapsed/expanded */
     folds?: FoldRegion[];
@@ -29,6 +33,9 @@ export type CodeSnippetRootProps<TLanguage extends string = string> = CodeSnippe
     /** Child components */
     children?: ReactNode;
 };
+/**
+ * Code block with syntax highlighting, actions, line numbers, folding, and maxLines collapse.
+ */
 export declare const CodeSnippetRoot: {
     <TLanguage extends string = string>({ code, language, size, lines, startingLineNumber, wrapLines: initialWrapLines, maxLines, folds: foldsProp, onCopy, className, children, "data-testid": testId, ...props }: CodeSnippetRootProps<TLanguage>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/CodeSnippet/CodeSnippetRoot.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
@@ -7,8 +7,8 @@ import { copyText } from "../../utils/copyText.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { plainAdapter } from "./adapters/plain.js";
 import { CodeSnippetContext, MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
+import { CodeSnippetShowMoreButton } from "./CodeSnippetShowMoreButton.js";
 import { useAdapter } from "./hooks/index.js";
-import { ShowMoreButton } from "./internal/ShowMoreButton.js";
 import { buildDisplayItems, validateFolds } from "./lib/foldUtils.js";
 const codeSnippetRootVariants = cva("relative code-snippet-bg rounded-6 font-mono text-syntax-no-syntax overflow-hidden flex flex-col [&::selection]:bg-[var(--color-syntax-highlight-selected-highlight)] [&::selection]:text-[var(--color-syntax-highlight-selected-code)] [&_*::selection]:bg-[var(--color-syntax-highlight-selected-highlight)] [&_*::selection]:text-[var(--color-syntax-highlight-selected-code)] [&>[data-slot=code-snippet-actions]]:absolute [&>[data-slot=code-snippet-actions]]:right-0 [&>[data-slot=code-snippet-actions]]:top-0 [&>[data-slot=code-snippet-actions]]:z-30 [&>[data-slot=code-snippet-actions]]:p-6 [&>[data-slot=code-snippet-actions]]:rounded-br-6 [&>[data-slot=code-snippet-actions]]:rounded-tl-6", {
     variants: {
@@ -23,6 +23,7 @@ const codeSnippetRootVariants = cva("relative code-snippet-bg rounded-6 font-mon
     }
 });
 const EMPTY_LINES = {};
+const isCodeSnippetShowMoreButton = (child)=>/*#__PURE__*/ isValidElement(child) && child.type?.displayName === CodeSnippetShowMoreButton.displayName;
 const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_LINES, startingLineNumber = 1, wrapLines: initialWrapLines = false, maxLines = 0, folds: foldsProp, onCopy, className, children, 'data-testid': testId, ...props })=>{
     const adapterContext = useAdapter();
     const [wrapLines, setWrapLines] = useState(initialWrapLines);
@@ -118,6 +119,7 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         collapsedFolds,
         startingLineNumber
     ]);
+    const hasExplicitShowMoreButton = Children.toArray(children).some(isCodeSnippetShowMoreButton);
     const visibleDisplayItems = useMemo(()=>{
         const hiddenRows = displayItems.length - maxLines;
         const shouldClip = maxLines > 0 && !isExpanded && hiddenRows >= MIN_HIDDEN_LINES_THRESHOLD;
@@ -187,7 +189,7 @@ const CodeSnippetRoot = ({ code, language = 'text', size = 'sm', lines = EMPTY_L
         ...!isFullscreen ? props : {},
         children: [
             children,
-            maxLines > 0 && /*#__PURE__*/ jsx(ShowMoreButton, {})
+            maxLines > 0 && !hasExplicitShowMoreButton && /*#__PURE__*/ jsx(CodeSnippetShowMoreButton, {})
         ]
     });
     return /*#__PURE__*/ jsx(TestIdProvider, {

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

@@ -0,0 +1,12 @@
+import type { FC, Ref } from 'react';
+import { type ButtonProps } from '../Button';
+export type CodeSnippetShowMoreButtonProps = Omit<ButtonProps, 'children'> & {
+    ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * Optional explicit show-more control for snippets with `maxLines`.
+ * Do not render this for ordinary collapsed snippets; `CodeSnippetRoot`
+ * auto-renders the default control. Render it as a direct child only when
+ * consumer props must reach the real button.
+ */
+export declare const CodeSnippetShowMoreButton: FC<CodeSnippetShowMoreButtonProps>;

package/dist/components/CodeSnippet/{internal/ShowMoreButton.js → CodeSnippetShowMoreButton.js}

@@ -1,22 +1,28 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "../../../icons/ChevronDown.js";
-import { ChevronUp } from "../../../icons/ChevronUp.js";
-import { Button } from "../../Button/index.js";
-import { MIN_HIDDEN_LINES_THRESHOLD } from "../CodeSnippetContext.js";
-import { useCodeSnippet } from "../hooks/index.js";
-const ShowMoreButton = ()=>{
+import { ChevronDown } from "../../icons/ChevronDown.js";
+import { ChevronUp } from "../../icons/ChevronUp.js";
+import { Button } from "../Button/index.js";
+import { MIN_HIDDEN_LINES_THRESHOLD } from "./CodeSnippetContext.js";
+import { useCodeSnippet } from "./hooks/index.js";
+const CodeSnippetShowMoreButton = ({ onClick, ref, ...props })=>{
     const { displayItems, maxLines, isExpanded, setIsExpanded } = useCodeSnippet();
     const hiddenLines = displayItems.length - maxLines;
     if (maxLines <= 0 || hiddenLines < MIN_HIDDEN_LINES_THRESHOLD) return null;
+    const handleClick = (event)=>{
+        setIsExpanded(!isExpanded);
+        onClick?.(event);
+    };
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "code-snippet-show-more",
         className: "flex h-36 items-center justify-center px-6",
         children: /*#__PURE__*/ jsx(Button, {
+            ref: ref,
             variant: "ghost",
             color: "neutral",
             size: "small",
             fullWidth: true,
-            onClick: ()=>setIsExpanded(!isExpanded),
+            ...props,
+            onClick: handleClick,
             children: isExpanded ? /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     "Show less",
@@ -33,5 +39,5 @@ const ShowMoreButton = ()=>{
         })
     });
 };
-ShowMoreButton.displayName = 'ShowMoreButton';
-export { ShowMoreButton };
+CodeSnippetShowMoreButton.displayName = 'CodeSnippetShowMoreButton';
+export { CodeSnippetShowMoreButton };

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

@@ -1,7 +1,4 @@
-import type { FC, ReactNode } from 'react';
-export type CodeSnippetTabProps = {
-    value: string;
-    disabled?: boolean;
-    children: ReactNode;
-};
+import type { FC } from 'react';
+import { type TabsTriggerProps } from '../Tabs/TabsTrigger';
+export type CodeSnippetTabProps = TabsTriggerProps;
 export declare const CodeSnippetTab: FC<CodeSnippetTabProps>;

package/dist/components/CodeSnippet/CodeSnippetTab.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
-import { TabsTrigger } from "../Tabs/index.js";
-const CodeSnippetTab = ({ value, disabled, children })=>{
-    const testId = useTestId('tab');
+import { TabsTrigger } from "../Tabs/TabsTrigger.js";
+const CodeSnippetTab = ({ 'data-testid': testIdProp, ...rest })=>{
+    const testId = useTestId('tab', testIdProp);
     return /*#__PURE__*/ jsx(TabsTrigger, {
-        value: value,
-        disabled: disabled,
-        "data-testid": testId,
-        children: children
+        ...rest,
+        "data-testid": testId
     });
 };
 CodeSnippetTab.displayName = 'CodeSnippetTab';

package/dist/components/CodeSnippet/CodeSnippetWrapButton.js

@@ -8,7 +8,6 @@ const CodeSnippetWrapButton = ({ onToggle, ref, ...props })=>{
     const testId = useTestId('wrap-button');
     const { wrapLines, setWrapLines } = useCodeSnippet();
     const handleToggle = (active, event)=>{
-        event.stopPropagation();
         setWrapLines(active);
         onToggle?.(active, event);
     };

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

@@ -1,13 +1,15 @@
-import type { ComponentPropsWithRef, FC } from 'react';
+import type { ComponentPropsWithRef, FC, ReactElement } from 'react';
 export interface InlineCodeSnippetProps extends Omit<ComponentPropsWithRef<'code'>, 'children'> {
     /** The code content to display */
     code: string;
     /** Size variant */
     size?: 'sm' | 'md' | 'lg' | 'inherit';
-    /** Render as child element using Radix Slot */
+    /** Render as the React element passed via `children` instead of the default `<code>`. The `code` prop becomes the cloned element's content. */
     asChild?: boolean;
     /** Enable click to copy functionality (default: true) */
     copyable?: boolean;
+    /** Used only when `asChild` is true. Must be a single React element; the `code` prop is rendered as its children. */
+    children?: ReactElement;
 }
 /**
  * InlineCodeSnippet - A simple inline code display component with optional copy functionality.