@wallarm-org/design-system 1.20.4 → 1.22.0

package/dist/components/AppShell/story-content/_storySearchModal.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Building, LoaderCircle, Plus } from "../../../icons/index.js";
+import { Building, CircleDashed, Plus } from "../../../icons/index.js";
 import { Button } from "../../Button/index.js";
 import { Code } from "../../Code/index.js";
 import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../../EmptyState/index.js";
@@ -184,7 +184,7 @@ const StorySearchModal = ()=>{
                                     filteredRecent.map((item)=>/*#__PURE__*/ jsxs(SearchModalItem, {
                                             onSelect: ()=>{},
                                             children: [
-                                                /*#__PURE__*/ jsx(LoaderCircle, {
+                                                /*#__PURE__*/ jsx(CircleDashed, {
                                                     className: "text-text-primary shrink-0 !icon-md"
                                                 }),
                                                 /*#__PURE__*/ jsxs(Text, {
@@ -230,7 +230,7 @@ const StorySearchModal = ()=>{
                                     filteredJumpTo.map((item)=>/*#__PURE__*/ jsxs(SearchModalItem, {
                                             onSelect: ()=>{},
                                             children: [
-                                                /*#__PURE__*/ jsx(LoaderCircle, {
+                                                /*#__PURE__*/ jsx(CircleDashed, {
                                                     className: "text-text-primary shrink-0 !icon-md"
                                                 }),
                                                 /*#__PURE__*/ jsx(Text, {

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

@@ -1,5 +1,5 @@
 import type { FC, Ref } from 'react';
-import type { ButtonProps } from '../Button';
+import { type ButtonProps } from '../Button';
 export type CodeSnippetCopyButtonProps = Omit<ButtonProps, 'children'> & {
     ref?: Ref<HTMLButtonElement>;
 };

package/dist/components/CodeSnippet/CodeSnippetCopyButton.js

@@ -1,17 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
-import { CopyButton } from "../CopyButton/index.js";
+import { Button } from "../Button/index.js";
+import { Copyable, CopyableIcon } from "../Copyable/index.js";
 import { useCodeSnippet } from "./hooks/index.js";
 const CodeSnippetCopyButton = ({ ref, ...props })=>{
     const testId = useTestId('copy-button');
     const { code } = useCodeSnippet();
-    return /*#__PURE__*/ jsx(CopyButton, {
-        ref: ref,
+    return /*#__PURE__*/ jsx(Copyable, {
         text: code,
-        size: "small",
-        "aria-label": "Copy code",
-        "data-testid": testId,
-        ...props
+        tooltip: true,
+        children: /*#__PURE__*/ jsx(Button, {
+            ref: ref,
+            variant: "ghost",
+            color: "neutral",
+            size: "small",
+            "aria-label": "Copy code",
+            "data-testid": testId,
+            ...props,
+            children: /*#__PURE__*/ jsx(CopyableIcon, {})
+        })
     });
 };
 CodeSnippetCopyButton.displayName = 'CodeSnippetCopyButton';

package/dist/components/CodeSnippet/InlineCodeSnippet.js

@@ -1,10 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } 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";
 import { cn } from "../../utils/cn.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { Copyable } from "../Copyable/index.js";
 const inlineCodeSnippetVariants = cva("inline-flex items-center code-snippet-bg rounded-6 font-mono font-normal text-syntax-no-syntax", {
     variants: {
         size: {
@@ -21,14 +20,6 @@ const inlineCodeSnippetVariants = cva("inline-flex items-center code-snippet-bg
 });
 const InlineCodeSnippet = (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 handleClick = (event)=>{
-        handleCopy();
-        onClick?.(event);
-    };
     const sharedProps = {
         ref,
         'data-slot': 'inline-code-snippet',
@@ -38,7 +29,7 @@ const InlineCodeSnippet = (props)=>{
             copyable
         }), className),
         ...otherProps,
-        onClick: handleClick
+        onClick
     };
     const codeElement = asChild && /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ jsx(Slot, {
         ...sharedProps,
@@ -48,19 +39,10 @@ const InlineCodeSnippet = (props)=>{
         children: code
     });
     if (!copyable) return codeElement;
-    return /*#__PURE__*/ jsxs(Tooltip, {
-        open: tooltipOpen,
-        onOpenChange: onTooltipOpenChange,
-        closeOnPointerDown: false,
-        children: [
-            /*#__PURE__*/ jsx(TooltipTrigger, {
-                asChild: true,
-                children: codeElement
-            }),
-            /*#__PURE__*/ jsx(TooltipContent, {
-                children: copied ? 'Copied' : 'Click to copy'
-            })
-        ]
+    return /*#__PURE__*/ jsx(Copyable, {
+        text: code,
+        tooltip: true,
+        children: codeElement
     });
 };
 InlineCodeSnippet.displayName = 'InlineCodeSnippet';

package/dist/components/Copyable/Copyable.d.ts

@@ -0,0 +1,39 @@
+import { type FC, type ReactNode } from 'react';
+export interface CopyableProps {
+    /** The text to copy to the clipboard. */
+    text: string;
+    /**
+     * Show a tooltip with copy feedback.
+     *
+     * - `true`  — "Click to copy" / "Copied"
+     * - `string` — custom idle text; copied text stays "Copied"
+     * - `{ idle: string; copied: string }` — fully custom tooltip text
+     */
+    tooltip?: boolean | string | {
+        idle: string;
+        copied: string;
+    };
+    /** Fired after a successful copy. Use for toast feedback. */
+    onCopied?: () => void;
+    /** Time in ms before the `copied` state resets (default: 2000). */
+    resetDelay?: number;
+    children: ReactNode;
+}
+/**
+ * Headless click-to-copy behaviour wrapper.
+ *
+ * Renders **no DOM node of its own** — it injects an `onClick` handler onto
+ * its child via `@radix-ui/react-slot` and exposes a `copied` flag through
+ * React context so descendants like `<CopyableIcon>` and `<CopyableLabel>`
+ * can react to the copy state.
+ *
+ * @example
+ * ```tsx
+ * <Copyable text={value} tooltip>
+ *   <Button variant="ghost" size="small">
+ *     <CopyableIcon />
+ *   </Button>
+ * </Copyable>
+ * ```
+ */
+export declare const Copyable: FC<CopyableProps>;

package/dist/components/Copyable/Copyable.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { useCopyToClipboard } from "../../hooks/useCopyToClipboard.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { CopyableProvider } from "./CopyableContext.js";
+const Copyable = ({ text, tooltip, onCopied, resetDelay = 2000, children })=>{
+    const { copied, copy } = useCopyToClipboard(resetDelay);
+    const [hovering, setHovering] = useState(false);
+    const [keepOpen, setKeepOpen] = useState(false);
+    const keepOpenTimerRef = useRef(void 0);
+    const tooltipOpen = hovering || keepOpen;
+    const handleClick = useCallback((_event)=>{
+        copy(text);
+        onCopied?.();
+        if (tooltip) {
+            setKeepOpen(true);
+            clearTimeout(keepOpenTimerRef.current);
+            keepOpenTimerRef.current = setTimeout(()=>{
+                setKeepOpen(false);
+            }, resetDelay);
+        }
+    }, [
+        copy,
+        text,
+        onCopied,
+        tooltip,
+        resetDelay
+    ]);
+    const handleTooltipOpenChange = useCallback((open)=>{
+        setHovering(open);
+    }, []);
+    useEffect(()=>{
+        if (!keepOpen) return;
+        let listenerAdded = false;
+        const dismiss = ()=>{
+            setKeepOpen(false);
+            clearTimeout(keepOpenTimerRef.current);
+        };
+        const frame = requestAnimationFrame(()=>{
+            document.addEventListener('pointerdown', dismiss);
+            listenerAdded = true;
+        });
+        return ()=>{
+            cancelAnimationFrame(frame);
+            if (listenerAdded) document.removeEventListener('pointerdown', dismiss);
+        };
+    }, [
+        keepOpen
+    ]);
+    const tooltipIdle = 'string' == typeof tooltip ? tooltip : 'object' == typeof tooltip ? tooltip.idle : 'Click to copy';
+    const tooltipCopied = 'object' == typeof tooltip ? tooltip.copied : 'Copied';
+    const ctx = useMemo(()=>({
+            copied
+        }), [
+        copied
+    ]);
+    const slotted = /*#__PURE__*/ jsx(Slot, {
+        onClick: handleClick,
+        children: children
+    });
+    if (!tooltip) return /*#__PURE__*/ jsx(CopyableProvider, {
+        value: ctx,
+        children: slotted
+    });
+    return /*#__PURE__*/ jsx(CopyableProvider, {
+        value: ctx,
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            open: tooltipOpen,
+            onOpenChange: handleTooltipOpenChange,
+            closeOnPointerDown: false,
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: slotted
+                }),
+                /*#__PURE__*/ jsx(TooltipContent, {
+                    children: copied ? tooltipCopied : tooltipIdle
+                })
+            ]
+        })
+    });
+};
+Copyable.displayName = 'Copyable';
+export { Copyable };

package/dist/components/Copyable/CopyableContext.d.ts

@@ -0,0 +1,11 @@
+interface CopyableContextValue {
+    copied: boolean;
+}
+export declare const CopyableProvider: import("react").Provider<CopyableContextValue | null>;
+/**
+ * Read the `copied` state from the nearest `<Copyable>` ancestor.
+ *
+ * @throws when called outside a `<Copyable>` tree.
+ */
+export declare function useCopyable(): CopyableContextValue;
+export {};

package/dist/components/Copyable/CopyableContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const CopyableContext = createContext(null);
+const CopyableProvider = CopyableContext.Provider;
+function useCopyable() {
+    const ctx = useContext(CopyableContext);
+    if (!ctx) throw new Error('useCopyable must be used within a <Copyable> component');
+    return ctx;
+}
+export { CopyableProvider, useCopyable };

package/dist/components/Copyable/CopyableIcon.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { SvgIconProps } from '../../icons/SvgIcon';
+export type CopyableIconProps = SvgIconProps;
+/**
+ * Swaps between `Copy` and `Check` icons based on the parent `<Copyable>` state.
+ *
+ * Must be rendered inside a `<Copyable>` tree.
+ */
+export declare const CopyableIcon: FC<CopyableIconProps>;

package/dist/components/Copyable/CopyableIcon.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Check, Copy } from "../../icons/index.js";
+import { useCopyable } from "./CopyableContext.js";
+const CopyableIcon = (props)=>{
+    const { copied } = useCopyable();
+    return copied ? /*#__PURE__*/ jsx(Check, {
+        ...props
+    }) : /*#__PURE__*/ jsx(Copy, {
+        ...props
+    });
+};
+CopyableIcon.displayName = 'CopyableIcon';
+export { CopyableIcon };

package/dist/components/Copyable/CopyableLabel.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+export interface CopyableLabelProps {
+    /** Label shown in the idle state */
+    idle: string;
+    /** Label shown after a successful copy (default: "Copied") */
+    copied?: string;
+    className?: string;
+}
+/**
+ * Width-stable label swap driven by the parent `<Copyable>` state.
+ *
+ * Both labels are rendered in the same CSS-grid cell so the element always
+ * occupies the width of the wider string. The inactive label is visually
+ * hidden but still contributes to layout.
+ *
+ * Must be rendered inside a `<Copyable>` tree.
+ */
+export declare const CopyableLabel: FC<CopyableLabelProps>;

package/dist/components/Copyable/CopyableLabel.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useCopyable } from "./CopyableContext.js";
+const CopyableLabel = ({ idle, copied: copiedText = 'Copied', className })=>{
+    const { copied } = useCopyable();
+    return /*#__PURE__*/ jsxs("span", {
+        "data-slot": "copyable-label",
+        className: cn('inline-grid [&>*]:col-start-1 [&>*]:row-start-1', className),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": copied || void 0,
+                className: copied ? 'invisible' : void 0,
+                children: idle
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": !copied || void 0,
+                className: copied ? void 0 : 'invisible',
+                children: copiedText
+            })
+        ]
+    });
+};
+CopyableLabel.displayName = 'CopyableLabel';
+export { CopyableLabel };

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

@@ -0,0 +1,4 @@
+export { Copyable, type CopyableProps } from './Copyable';
+export { useCopyable } from './CopyableContext';
+export { CopyableIcon, type CopyableIconProps } from './CopyableIcon';
+export { CopyableLabel, type CopyableLabelProps } from './CopyableLabel';

package/dist/components/Copyable/index.js

@@ -0,0 +1,4 @@
+export { Copyable } from "./Copyable.js";
+export { useCopyable } from "./CopyableContext.js";
+export { CopyableIcon } from "./CopyableIcon.js";
+export { CopyableLabel } from "./CopyableLabel.js";

package/dist/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,18 @@
+import type { FC, InputHTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+type SearchInputSize = 'default' | 'medium' | 'small';
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'>, TestableProps {
+    /** Current search value (controlled). */
+    value: string;
+    /** Called when the value changes (typing or clearing). */
+    onChange: (value: string) => void;
+    /** Called when the clear button is clicked. Fires before onChange(''). */
+    onClear?: () => void;
+    /** Input size variant. @default 'default' */
+    size?: SearchInputSize;
+    /** @default false */
+    disabled?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare const SearchInput: FC<SearchInputProps>;
+export {};

package/dist/components/SearchInput/SearchInput.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { Input } from "../Input/index.js";
+import { InputGroup } from "../InputGroup/InputGroup.js";
+import { InputGroupAddon } from "../InputGroup/InputGroupAddon.js";
+const SearchInput = ({ value, onChange, onClear, size = 'default', disabled = false, placeholder = 'Search', className, ref, 'data-testid': testId, ...rest })=>{
+    const handleChange = (event)=>{
+        onChange(event.target.value);
+    };
+    const handleClear = ()=>{
+        onClear?.();
+        onChange('');
+    };
+    const showClear = value.length > 0 && !disabled;
+    return /*#__PURE__*/ jsxs(InputGroup, {
+        size: size,
+        className: className,
+        "data-slot": "search-input",
+        "data-testid": testId,
+        children: [
+            /*#__PURE__*/ jsx(InputGroupAddon, {
+                children: /*#__PURE__*/ jsx(Search, {})
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                ...rest,
+                type: "text",
+                value: value,
+                onChange: handleChange,
+                placeholder: placeholder,
+                disabled: disabled,
+                size: size,
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx(InputGroupAddon, {
+                align: "inline-end",
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    tabIndex: showClear ? -1 : void 0,
+                    disabled: !showClear,
+                    onClick: handleClear,
+                    "aria-label": "Clear",
+                    "aria-hidden": !showClear,
+                    className: cn('flex text-icon-secondary', showClear ? 'cursor-pointer' : 'invisible'),
+                    children: /*#__PURE__*/ jsx(X, {
+                        size: "md"
+                    })
+                })
+            })
+        ]
+    });
+};
+SearchInput.displayName = 'SearchInput';
+export { SearchInput };

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

@@ -0,0 +1 @@
+export { SearchInput, type SearchInputProps } from './SearchInput';

package/dist/components/SearchInput/index.js

@@ -0,0 +1 @@
+export { SearchInput } from "./SearchInput.js";

package/dist/components/SearchModal/SearchModalInput.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Search } from "../../icons/index.js";
+import { Search, X } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/mergeRefs.js";
 import { useTestId } from "../../utils/testId.js";
@@ -31,14 +31,27 @@ const SearchModalInput = ({ ref, loading = false, className, ...props })=>{
                 className: cn('flex-1 h-48 bg-transparent text-text-primary text-base', 'placeholder:text-text-hint outline-none', className),
                 autoComplete: "off"
             }),
+            query && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                onClick: ()=>{
+                    setQuery('');
+                    inputRef.current?.focus();
+                },
+                className: "shrink-0 cursor-pointer text-text-secondary hover:text-text-primary transition-colors",
+                "aria-label": "Clear search",
+                children: /*#__PURE__*/ jsx(X, {
+                    className: "!icon-md"
+                })
+            }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
                 tabIndex: -1,
                 onClick: close,
-                className: "shrink-0 cursor-pointer",
+                className: "flex shrink-0 cursor-pointer",
                 "aria-label": "Close",
                 children: /*#__PURE__*/ jsx(Kbd, {
-                    size: "xsmall",
+                    size: "small",
                     children: "ESC"
                 })
             })

package/dist/components/SegmentedControl/classes.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const segmentedControlVariants = cva('overflow-visible flex bg-bg-primary p-4 gap-0 items-center rounded-12 mb-8', {
+const segmentedControlVariants = cva('overflow-visible flex bg-bg-primary p-4 gap-0 items-center rounded-12', {
     variants: {
         fullWidth: {
             true: 'w-full [&_label]:flex-1',

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

@@ -3,9 +3,11 @@ import { type TestableProps } from '../../utils/testId';
 type SelectNativeProps<T extends CollectionItem> = Omit<SelectRootProps<T>, 'positioning' | 'lazyMount' | 'unmountOnExit'>;
 export interface SelectBaseProps {
     loading?: boolean;
+    /** Override default floating positioning (merged with DS defaults). */
+    positioning?: SelectRootProps<CollectionItem>['positioning'];
 }
 type SelectProps<T extends CollectionItem> = SelectNativeProps<T> & SelectBaseProps & TestableProps;
-export declare function Select<T extends CollectionItem>({ children, loading, disabled, 'data-testid': testId, ...props }: SelectProps<T>): import("react").JSX.Element;
+export declare function Select<T extends CollectionItem>({ children, loading, disabled, positioning: positioningOverride, 'data-testid': testId, ...props }: SelectProps<T>): import("react").JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

package/dist/components/Select/Select.js

@@ -3,14 +3,17 @@ import { useMemo } from "react";
 import { Select } from "@ark-ui/react/select";
 import { TestIdProvider } from "../../utils/testId.js";
 import { SelectSharedProvider } from "./SelectSharedContext/index.js";
-const Select_Select = ({ children, loading = false, disabled = false, 'data-testid': testId, ...props })=>{
+const Select_Select = ({ children, loading = false, disabled = false, positioning: positioningOverride, 'data-testid': testId, ...props })=>{
     const positioning = useMemo(()=>({
             offset: {
                 mainAxis: 4
             },
             gutter: 4,
-            overflowPadding: 4
-        }), []);
+            overflowPadding: 4,
+            ...positioningOverride
+        }), [
+        positioningOverride
+    ]);
     return /*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
         children: /*#__PURE__*/ jsx(SelectSharedProvider, {

package/dist/components/Select/SelectSearchInput.js

@@ -1,26 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Search } from "../../icons/index.js";
+import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
-import { Input } from "../Input/index.js";
-import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
+import { SearchInput } from "../SearchInput/index.js";
 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, {
+    return /*#__PURE__*/ jsx(SearchInput, {
         ...rest,
-        "data-testid": testId,
-        children: [
-            /*#__PURE__*/ jsx(InputGroupAddon, {
-                children: /*#__PURE__*/ jsx(Search, {})
-            }),
-            /*#__PURE__*/ jsx(Input, {
-                placeholder: "Search",
-                value: value,
-                onChange: handleChange
-            })
-        ]
+        value: value,
+        onChange: onChange,
+        "data-testid": testId
     });
 };
 SelectSearchInput.displayName = 'SelectSearchInput';

package/dist/components/SettingsHeader/SettingsHeader.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface SettingsHeaderProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SettingsHeader: FC<SettingsHeaderProps>;

package/dist/components/SettingsHeader/SettingsHeader.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+const SettingsHeader = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-testid": testId,
+            "data-slot": "settings-header",
+            className: cn('flex flex-col gap-6 pb-12 pt-8 px-24', className),
+            children: children
+        })
+    });
+SettingsHeader.displayName = 'SettingsHeader';
+export { SettingsHeader };

package/dist/components/SettingsHeader/SettingsHeaderActions.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SettingsHeaderActionsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SettingsHeaderActions: FC<SettingsHeaderActionsProps>;

package/dist/components/SettingsHeader/SettingsHeaderActions.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderActions = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('actions');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-actions",
+        className: cn('flex items-center gap-8 shrink-0 ml-auto', className),
+        children: children
+    });
+};
+SettingsHeaderActions.displayName = 'SettingsHeaderActions';
+export { SettingsHeaderActions };

package/dist/components/SettingsHeader/SettingsHeaderBreadcrumbs.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SettingsHeaderBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const SettingsHeaderBreadcrumbs: FC<SettingsHeaderBreadcrumbsProps>;

package/dist/components/SettingsHeader/SettingsHeaderBreadcrumbs.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SettingsHeaderBreadcrumbs = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('breadcrumbs');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-testid": testId,
+        "data-slot": "settings-header-breadcrumbs",
+        className: cn(className),
+        children: children
+    });
+};
+SettingsHeaderBreadcrumbs.displayName = 'SettingsHeaderBreadcrumbs';
+export { SettingsHeaderBreadcrumbs };

package/dist/components/SettingsHeader/SettingsHeaderDescription.d.ts

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface SettingsHeaderDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    ref?: Ref<HTMLParagraphElement>;
+}
+export declare const SettingsHeaderDescription: FC<SettingsHeaderDescriptionProps>;