@shipfox/react-ui 0.14.0 → 0.16.0

package/dist/components/search/search-inline.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { searchInputVariants } from './search-variants.js';
+export function SearchInline({ className, variant, size, radius, value, onChange, onClear, showClearButton = true, ...props }) {
+    const inputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState('');
+    const isControlled = value !== undefined;
+    const inputValue = isControlled ? value : internalValue;
+    const hasValue = Boolean(inputValue);
+    const isSmall = size === 'small';
+    const handleChange = useCallback((e)=>{
+        if (!isControlled) {
+            setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+    }, [
+        isControlled,
+        onChange
+    ]);
+    const handleClear = useCallback(()=>{
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        if (onChange && inputRef.current) {
+            inputRef.current.value = '';
+            const syntheticEvent = {
+                target: inputRef.current,
+                currentTarget: inputRef.current
+            };
+            onChange(syntheticEvent);
+        }
+        onClear?.();
+        inputRef.current?.focus();
+    }, [
+        isControlled,
+        onChange,
+        onClear
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (e.key === 'Escape' && hasValue) {
+            e.preventDefault();
+            handleClear();
+        }
+    }, [
+        hasValue,
+        handleClear
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "search-inline",
+        className: cn(searchInputVariants({
+            variant,
+            size,
+            radius
+        }), className),
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: cn('shrink-0 text-foreground-neutral-muted', isSmall ? 'size-14' : 'size-16')
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                ref: inputRef,
+                type: "text",
+                value: inputValue,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                className: cn('flex-1 bg-transparent outline-none min-w-0', 'text-base md:text-sm', 'text-foreground-neutral-base', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled'),
+                ...props
+            }),
+            showClearButton && hasValue && /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: handleClear,
+                className: cn('shrink-0 cursor-pointer rounded-4 p-2 -mx-2', 'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors'),
+                "aria-label": "Clear search",
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "closeLine",
+                    className: "size-16"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=search-inline.js.map

package/dist/components/search/search-modal.d.ts

@@ -0,0 +1,25 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import type { ComponentProps, ReactNode } from 'react';
+import { type ModalContentProps } from '../modal/modal';
+export type SearchContentProps = {
+    breakpoint?: string;
+} & Omit<ModalContentProps, 'open' | 'onOpenChange'>;
+export declare function SearchContent({ breakpoint, className, children, overlayClassName, onEscapeKeyDown, ...props }: SearchContentProps): import("react/jsx-runtime").JSX.Element;
+export type SearchInputProps = Omit<ComponentProps<typeof CommandPrimitive.Input>, 'value' | 'onValueChange'>;
+export declare function SearchInput({ className, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export type SearchListProps = ComponentProps<typeof CommandPrimitive.List>;
+export declare function SearchList({ className, ...props }: SearchListProps): import("react/jsx-runtime").JSX.Element;
+export type SearchEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
+export declare function SearchEmpty({ className, ...props }: SearchEmptyProps): import("react/jsx-runtime").JSX.Element;
+export type SearchGroupProps = ComponentProps<typeof CommandPrimitive.Group>;
+export declare function SearchGroup({ className, ...props }: SearchGroupProps): import("react/jsx-runtime").JSX.Element;
+export type SearchItemProps = ComponentProps<typeof CommandPrimitive.Item> & {
+    icon?: ReactNode;
+    description?: string;
+};
+export declare function SearchItem({ className, children, icon, description, ...props }: SearchItemProps): import("react/jsx-runtime").JSX.Element;
+export type SearchSeparatorProps = ComponentProps<typeof CommandPrimitive.Separator>;
+export declare function SearchSeparator({ className, ...props }: SearchSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export type SearchFooterProps = ComponentProps<'div'>;
+export declare function SearchFooter({ className, ...props }: SearchFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-modal.d.ts.map

package/dist/components/search/search-modal.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { useCallback } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { Kbd } from '../kbd/index.js';
+import { Modal, ModalBody, ModalContent, ModalTitle } from '../modal/modal.js';
+import { useSearchContext } from './search-context.js';
+export function SearchContent({ breakpoint = '(min-width: 768px)', className, children, overlayClassName, onEscapeKeyDown, ...props }) {
+    const { open, setOpen, searchValue, setSearchValue } = useSearchContext();
+    const handleEscapeKeyDown = useCallback((event)=>{
+        if (searchValue) {
+            event.preventDefault();
+            setSearchValue('');
+        } else {
+            onEscapeKeyDown?.(event);
+        }
+    }, [
+        searchValue,
+        setSearchValue,
+        onEscapeKeyDown
+    ]);
+    return /*#__PURE__*/ _jsx(Modal, {
+        open: open,
+        onOpenChange: setOpen,
+        breakpoint: breakpoint,
+        children: /*#__PURE__*/ _jsxs(ModalContent, {
+            "data-slot": "search-content",
+            className: cn('top-[15%]! translate-y-0!', className),
+            overlayClassName: cn('backdrop-blur-sm', overlayClassName),
+            onEscapeKeyDown: handleEscapeKeyDown,
+            ...props,
+            children: [
+                /*#__PURE__*/ _jsx(ModalTitle, {
+                    className: "sr-only",
+                    children: "Search"
+                }),
+                /*#__PURE__*/ _jsx(ModalBody, {
+                    className: "flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip",
+                    children: children
+                })
+            ]
+        })
+    });
+}
+export function SearchInput({ className, ...props }) {
+    const { open, searchValue, setSearchValue } = useSearchContext();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-full shrink-0 flex items-center gap-8 border-b border-border-neutral-strong px-16 py-12",
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: "size-16 shrink-0 text-foreground-neutral-muted"
+            }),
+            /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
+                "data-slot": "search-input",
+                autoFocus: open,
+                value: searchValue,
+                onValueChange: setSearchValue,
+                className: cn('flex-1 bg-transparent text-base md:text-sm leading-20 outline-none', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled', className),
+                ...props
+            }),
+            /*#__PURE__*/ _jsx(Kbd, {
+                children: "Esc"
+            })
+        ]
+    });
+}
+export function SearchList({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
+        "data-slot": "search-list",
+        className: cn('flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden px-8 py-4 scrollbar', 'md:max-h-400', className),
+        ...props
+    });
+}
+export function SearchEmpty({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
+        "data-slot": "search-empty",
+        className: cn('py-32 text-center text-sm text-foreground-neutral-muted', className),
+        ...props
+    });
+}
+export function SearchGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
+        "data-slot": "search-group",
+        className: cn('overflow-hidden', '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4', '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20', '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle', '[&_[cmdk-group-heading]]:select-none', className),
+        ...props
+    });
+}
+export function SearchItem({ className, children, icon, description, ...props }) {
+    return /*#__PURE__*/ _jsxs(CommandPrimitive.Item, {
+        "data-slot": "search-item",
+        className: cn('relative flex cursor-pointer select-none items-center gap-12 rounded-8 p-8', 'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors', 'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled', className),
+        ...props,
+        children: [
+            icon && /*#__PURE__*/ _jsx("span", {
+                className: "shrink-0 text-foreground-neutral-muted",
+                children: icon
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex-1 min-w-0",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "truncate",
+                        children: children
+                    }),
+                    description && /*#__PURE__*/ _jsx("div", {
+                        className: "truncate text-xs text-foreground-neutral-muted",
+                        children: description
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function SearchSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
+        "data-slot": "search-separator",
+        className: cn('my-8 h-px bg-border-neutral-base', className),
+        ...props
+    });
+}
+export function SearchFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "search-footer",
+        className: cn('w-full shrink-0 flex items-center justify-end gap-12 px-16 py-12', 'border-t border-border-neutral-strong', 'bg-background-components-base', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs font-medium text-foreground-neutral-subtle",
+                        children: "Navigation"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "↓"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "↑"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "h-12 w-px bg-border-neutral-strong"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-8",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs font-medium text-foreground-neutral-subtle",
+                        children: "Open result"
+                    }),
+                    /*#__PURE__*/ _jsx(Kbd, {
+                        children: "↵"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=search-modal.js.map

package/dist/components/search/search-trigger.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+import { searchTriggerVariants } from './search-variants';
+export type SearchTriggerProps = ComponentProps<'button'> & VariantProps<typeof searchTriggerVariants> & {
+    placeholder?: string;
+    shortcut?: string;
+};
+export declare function SearchTrigger({ className, variant, size, radius, placeholder, shortcut, ...props }: SearchTriggerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-trigger.d.ts.map

package/dist/components/search/search-trigger.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { Kbd } from '../kbd/index.js';
+import { useSearchContext } from './search-context.js';
+import { searchTriggerVariants } from './search-variants.js';
+export function SearchTrigger({ className, variant, size, radius, placeholder = 'Search', shortcut = '⌘K', ...props }) {
+    const { setOpen } = useSearchContext();
+    const isSmall = size === 'small';
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        "data-slot": "search-trigger",
+        onClick: ()=>setOpen(true),
+        className: cn(searchTriggerVariants({
+            variant,
+            size,
+            radius
+        }), className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: cn('shrink-0', isSmall ? 'size-14' : 'size-16')
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 text-left truncate",
+                children: placeholder
+            }),
+            /*#__PURE__*/ _jsx(Kbd, {
+                className: cn(isSmall && 'h-16 min-w-16 px-4 text-[10px]', radius === 'rounded' && 'rounded-full'),
+                children: shortcut
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=search-trigger.js.map

package/dist/components/search/search-variants.d.ts

@@ -0,0 +1,14 @@
+import type { Transition } from 'framer-motion';
+export declare const searchInputVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+    radius?: "rounded" | "squared" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const searchTriggerVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+    radius?: "rounded" | "squared" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const searchDefaultTransition: Transition;
+export declare const SHORTCUT_KEY_REGEX: RegExp;
+//# sourceMappingURL=search-variants.d.ts.map

package/dist/components/search/search-variants.js

@@ -0,0 +1,90 @@
+import { cva } from 'class-variance-authority';
+const sharedInputStyles = [
+    'inline-flex items-center gap-8',
+    'text-sm leading-20',
+    'transition-[color,box-shadow,background-color] outline-none'
+];
+const variantStyles = {
+    primary: {
+        base: [
+            'bg-background-field-base',
+            'shadow-button-neutral'
+        ],
+        focus: 'focus-within:shadow-border-interactive-with-active',
+        hover: 'hover:bg-background-field-hover',
+        focusVisible: 'focus-visible:shadow-border-interactive-with-active'
+    },
+    secondary: {
+        base: [
+            'bg-background-field-component',
+            'border border-border-neutral-strong'
+        ],
+        focus: 'focus-within:shadow-border-interactive-with-active',
+        hover: 'hover:bg-background-field-component-hover',
+        focusVisible: 'focus-visible:shadow-border-interactive-with-active'
+    }
+};
+const sizeStyles = {
+    base: 'h-32 px-8 py-6',
+    small: 'h-28 px-8 py-4'
+};
+const radiusStyles = {
+    rounded: 'rounded-full',
+    squared: 'rounded-6'
+};
+export const searchInputVariants = cva(sharedInputStyles, {
+    variants: {
+        variant: {
+            primary: [
+                ...variantStyles.primary.base,
+                variantStyles.primary.focus
+            ],
+            secondary: [
+                ...variantStyles.secondary.base,
+                variantStyles.secondary.focus
+            ]
+        },
+        size: sizeStyles,
+        radius: radiusStyles
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'base',
+        radius: 'squared'
+    }
+});
+export const searchTriggerVariants = cva([
+    ...sharedInputStyles,
+    'cursor-pointer text-foreground-neutral-muted',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled'
+], {
+    variants: {
+        variant: {
+            primary: [
+                ...variantStyles.primary.base,
+                variantStyles.primary.hover,
+                variantStyles.primary.focusVisible
+            ],
+            secondary: [
+                ...variantStyles.secondary.base,
+                variantStyles.secondary.hover,
+                variantStyles.secondary.focusVisible
+            ]
+        },
+        size: sizeStyles,
+        radius: radiusStyles
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'base',
+        radius: 'squared'
+    }
+});
+export const searchDefaultTransition = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 30
+};
+export const SHORTCUT_KEY_REGEX = /^(meta\+|cmd\+|ctrl\+|⌘\+?)/i;
+
+//# sourceMappingURL=search-variants.js.map

package/dist/components/search/search.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type SearchProps = {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    shortcutKey?: string;
+    shouldFilter?: boolean;
+};
+export declare function Search({ children, open: controlledOpen, onOpenChange, defaultOpen, shortcutKey, shouldFilter, }: SearchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search.d.ts.map

package/dist/components/search/search.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { useCallback, useState } from 'react';
+import { SearchContext, useControllableState, useKeyboardShortcut } from './search-context.js';
+export function Search({ children, open: controlledOpen, onOpenChange, defaultOpen = false, shortcutKey, shouldFilter = true }) {
+    const [open, setOpen] = useControllableState(controlledOpen, defaultOpen, onOpenChange);
+    const [searchValue, setSearchValue] = useState('');
+    const handleOpen = useCallback(()=>setOpen(true), [
+        setOpen
+    ]);
+    useKeyboardShortcut(shortcutKey, handleOpen);
+    const handleSetOpen = useCallback((newOpen)=>{
+        if (!newOpen) {
+            setSearchValue('');
+        }
+        setOpen(newOpen);
+    }, [
+        setOpen
+    ]);
+    return /*#__PURE__*/ _jsx(SearchContext.Provider, {
+        value: {
+            open,
+            setOpen: handleSetOpen,
+            searchValue,
+            setSearchValue
+        },
+        children: /*#__PURE__*/ _jsx(CommandPrimitive, {
+            "data-slot": "search",
+            shouldFilter: shouldFilter,
+            children: children
+        })
+    });
+}
+
+//# sourceMappingURL=search.js.map