@wallarm-org/design-system 1.5.1-rc-fix-switch.1 → 1.6.0

package/dist/components/SearchModal/SearchModalFooter.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, CornerDownLeft } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { searchModalFooterVariants } from "./classes.js";
+const SearchModalFooter = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('footer');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "search-modal-footer",
+        "data-testid": testId,
+        className: cn(searchModalFooterVariants(), className),
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsxs("span", {
+                    className: "inline-flex items-center gap-4",
+                    children: [
+                        /*#__PURE__*/ jsx(ArrowUp, {
+                            className: "text-text-tertiary !icon-sm"
+                        }),
+                        /*#__PURE__*/ jsx(ArrowDown, {
+                            className: "text-text-tertiary !icon-sm"
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "xs",
+                            color: "secondary",
+                            children: "to navigate"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("span", {
+                    className: "inline-flex items-center gap-4",
+                    children: [
+                        /*#__PURE__*/ jsx(CornerDownLeft, {
+                            className: "text-text-tertiary !icon-sm"
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "xs",
+                            color: "secondary",
+                            children: "to select"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+SearchModalFooter.displayName = 'SearchModalFooter';
+export { SearchModalFooter };

package/dist/components/SearchModal/SearchModalGroup.d.ts

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

package/dist/components/SearchModal/SearchModalGroup.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SearchModalGroup = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('group');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "search-modal-group",
+        "data-testid": testId,
+        role: "group",
+        className: cn('[&:not(:first-child)]:mt-4', className),
+        children: children
+    });
+};
+SearchModalGroup.displayName = 'SearchModalGroup';
+export { SearchModalGroup };

package/dist/components/SearchModal/SearchModalGroupLabel.d.ts

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

package/dist/components/SearchModal/SearchModalGroupLabel.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { searchModalGroupLabelVariants } from "./classes.js";
+const SearchModalGroupLabel = ({ ref, children, className, ...props })=>{
+    const testId = useTestId('group-label');
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "search-modal-group-label",
+        "data-testid": testId,
+        className: cn(searchModalGroupLabelVariants(), className),
+        children: children
+    });
+};
+SearchModalGroupLabel.displayName = 'SearchModalGroupLabel';
+export { SearchModalGroupLabel };

package/dist/components/SearchModal/SearchModalInput.d.ts

@@ -0,0 +1,7 @@
+import type { FC, InputHTMLAttributes, Ref } from 'react';
+export interface SearchModalInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    ref?: Ref<HTMLInputElement>;
+    /** Show a loading spinner replacing the search icon */
+    loading?: boolean;
+}
+export declare const SearchModalInput: FC<SearchModalInputProps>;

package/dist/components/SearchModal/SearchModalInput.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { useTestId } from "../../utils/testId.js";
+import { Kbd } from "../Kbd/index.js";
+import { Loader } from "../Loader/index.js";
+import { searchModalInputVariants } from "./classes.js";
+import { useSearchModalContext } from "./SearchModalContext/index.js";
+const SearchModalInput = ({ ref, loading = false, className, ...props })=>{
+    const testId = useTestId('input');
+    const { query, setQuery, inputRef } = useSearchModalContext();
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "search-modal-input",
+        "data-testid": testId,
+        className: searchModalInputVariants(),
+        children: [
+            loading ? /*#__PURE__*/ jsx("span", {
+                className: "shrink-0",
+                children: /*#__PURE__*/ jsx(Loader, {
+                    size: "sm"
+                })
+            }) : /*#__PURE__*/ jsx(Search, {
+                className: "text-text-tertiary shrink-0 !icon-md"
+            }),
+            /*#__PURE__*/ jsx("input", {
+                ...props,
+                ref: mergeRefs(inputRef, ref),
+                value: query,
+                onChange: (e)=>setQuery(e.target.value),
+                className: cn('flex-1 h-48 bg-transparent text-text-primary text-base', 'placeholder:text-text-tertiary outline-none', className),
+                autoComplete: "off"
+            }),
+            /*#__PURE__*/ jsx(Kbd, {
+                size: "xsmall",
+                children: "ESC"
+            })
+        ]
+    });
+};
+SearchModalInput.displayName = 'SearchModalInput';
+export { SearchModalInput };

package/dist/components/SearchModal/SearchModalItem.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+export interface SearchModalItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+    /** Called when the item is selected (Enter key or click) */
+    onSelect?: () => void;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Render as child element (e.g. for <a> links) */
+    asChild?: boolean;
+    /** Whether selecting this item closes the modal (default: true) */
+    closeOnSelect?: boolean;
+}
+export declare const SearchModalItem: FC<SearchModalItemProps>;

package/dist/components/SearchModal/SearchModalItem.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { useTestId } from "../../utils/testId.js";
+import { searchModalItemVariants } from "./classes.js";
+import { useSearchModalContext } from "./SearchModalContext/index.js";
+const SearchModalItem = ({ ref, children, onSelect, disabled = false, asChild = false, closeOnSelect = true, className, onClick, onMouseEnter, ...props })=>{
+    const testId = useTestId('item');
+    const { activeIndex, setActiveIndex, getItems, close } = useSearchModalContext();
+    const itemRef = useRef(null);
+    const getOwnIndex = useCallback(()=>{
+        if (!itemRef.current) return -1;
+        const items = getItems();
+        return items.indexOf(itemRef.current);
+    }, [
+        getItems
+    ]);
+    const ownIndex = getOwnIndex();
+    const active = ownIndex >= 0 && ownIndex === activeIndex;
+    const handleClick = (e)=>{
+        if (disabled) return;
+        onClick?.(e);
+        onSelect?.();
+        if (closeOnSelect) close();
+    };
+    const handleMouseEnter = (e)=>{
+        onMouseEnter?.(e);
+        const index = getOwnIndex();
+        if (index >= 0) setActiveIndex(index);
+    };
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        ref: mergeRefs(itemRef, ref),
+        type: asChild ? void 0 : 'button',
+        "data-slot": "search-modal-item",
+        "data-testid": testId,
+        "data-search-item": "",
+        role: "option",
+        "aria-selected": active,
+        disabled: disabled,
+        className: cn(searchModalItemVariants({
+            active,
+            disabled
+        }), className),
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        children: children
+    });
+};
+SearchModalItem.displayName = 'SearchModalItem';
+export { SearchModalItem };

package/dist/components/SearchModal/SearchModalTrigger.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+export interface SearchModalTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'value'> {
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+    /** Render as child element */
+    asChild?: boolean;
+    /** Native button value attribute (string only, matching Ark UI's Dialog.Trigger) */
+    value?: string;
+}
+export declare const SearchModalTrigger: FC<SearchModalTriggerProps>;

package/dist/components/SearchModal/SearchModalTrigger.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { useTestId } from "../../utils/testId.js";
+const SearchModalTrigger = ({ ref, children, asChild, ...props })=>{
+    const testId = useTestId('trigger');
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        ...props,
+        ref: ref,
+        "data-slot": "search-modal-trigger",
+        "data-testid": testId,
+        asChild: asChild,
+        children: children
+    });
+};
+SearchModalTrigger.displayName = 'SearchModalTrigger';
+export { SearchModalTrigger };

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

@@ -0,0 +1,9 @@
+export declare const searchModalContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const searchModalInputVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const searchModalItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const searchModalBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const searchModalGroupLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const searchModalFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/SearchModal/classes.js

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const searchModalContentVariants = cva(cn('w-[560px] max-h-[70vh]', 'bg-bg-surface-1', 'rounded-12', 'shadow-lg', 'border border-border-primary', 'overflow-hidden', 'flex flex-col', 'outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', 'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95', 'data-[state=open]:slide-in-from-top-[2%]', 'data-[state=closed]:slide-out-to-top-[2%]', 'data-[state=open]:duration-200 data-[state=closed]:duration-150'));
+const searchModalInputVariants = cva(cn('flex items-center gap-8 px-16', 'border-b border-border-primary'));
+const searchModalItemVariants = cva(cn('flex items-center gap-12 w-full', 'px-16 py-8 rounded-6', 'cursor-pointer text-left no-underline', 'transition-colors'), {
+    variants: {
+        active: {
+            true: 'bg-states-primary-hover',
+            false: 'hover:bg-states-primary-hover'
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        active: false,
+        disabled: false
+    }
+});
+const searchModalBodyVariants = cva(cn('overflow-y-auto flex-1 py-8'));
+const searchModalGroupLabelVariants = cva(cn('px-16 pt-8'));
+const searchModalFooterVariants = cva(cn('flex items-center gap-16 px-16 py-8', 'border-t border-border-primary'));
+export { searchModalBodyVariants, searchModalContentVariants, searchModalFooterVariants, searchModalGroupLabelVariants, searchModalInputVariants, searchModalItemVariants };

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

@@ -0,0 +1,11 @@
+export { SearchModal, type SearchModalProps } from './SearchModal';
+export { SearchModalBody, type SearchModalBodyProps } from './SearchModalBody';
+export { SearchModalContent, type SearchModalContentProps } from './SearchModalContent';
+export { useSearchModalContext } from './SearchModalContext';
+export { SearchModalEmpty, type SearchModalEmptyProps } from './SearchModalEmpty';
+export { SearchModalFooter, type SearchModalFooterProps } from './SearchModalFooter';
+export { SearchModalGroup, type SearchModalGroupProps } from './SearchModalGroup';
+export { SearchModalGroupLabel, type SearchModalGroupLabelProps } from './SearchModalGroupLabel';
+export { SearchModalInput, type SearchModalInputProps } from './SearchModalInput';
+export { SearchModalItem, type SearchModalItemProps } from './SearchModalItem';
+export { SearchModalTrigger, type SearchModalTriggerProps } from './SearchModalTrigger';

package/dist/components/SearchModal/index.js

@@ -0,0 +1,11 @@
+export { SearchModal } from "./SearchModal.js";
+export { SearchModalBody } from "./SearchModalBody.js";
+export { SearchModalContent } from "./SearchModalContent.js";
+export { useSearchModalContext } from "./SearchModalContext/index.js";
+export { SearchModalEmpty } from "./SearchModalEmpty.js";
+export { SearchModalFooter } from "./SearchModalFooter.js";
+export { SearchModalGroup } from "./SearchModalGroup.js";
+export { SearchModalGroupLabel } from "./SearchModalGroupLabel.js";
+export { SearchModalInput } from "./SearchModalInput.js";
+export { SearchModalItem } from "./SearchModalItem.js";
+export { SearchModalTrigger } from "./SearchModalTrigger.js";

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', {
+const segmentedControlVariants = cva('overflow-visible flex bg-bg-primary p-4 gap-0 items-center rounded-12 mb-8', {
     variants: {
         fullWidth: {
             true: 'w-full [&_label]:flex-1',

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type R
 export { type BreadcrumbSegment, findFirstLinkPath, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, type NavStackEntry, pushPathname, RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, type RemoteShellContextValue, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, useLocationPathname, useRemoteShellContext, } from './components/RemoteShell';
 export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
+export { SearchModal, SearchModalBody, type SearchModalBodyProps, SearchModalContent, type SearchModalContentProps, SearchModalEmpty, type SearchModalEmptyProps, SearchModalFooter, type SearchModalFooterProps, SearchModalGroup, SearchModalGroupLabel, type SearchModalGroupLabelProps, type SearchModalGroupProps, SearchModalInput, type SearchModalInputProps, SearchModalItem, type SearchModalItemProps, type SearchModalProps, SearchModalTrigger, type SearchModalTriggerProps, useSearchModalContext, } from './components/SearchModal';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
 export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select';

package/dist/index.js

@@ -54,6 +54,7 @@ export { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from
 export { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, findFirstLinkPath, pushPathname, useLocationPathname, useRemoteShellContext } from "./components/RemoteShell/index.js";
 export { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./components/ResponseCode/index.js";
 export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
+export { SearchModal, SearchModalBody, SearchModalContent, SearchModalEmpty, SearchModalFooter, SearchModalGroup, SearchModalGroupLabel, SearchModalInput, SearchModalItem, SearchModalTrigger, useSearchModalContext } from "./components/SearchModal/index.js";
 export { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
 export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, useSelectSearch } from "./components/Select/index.js";