@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/search/search-modal.tsx

@@ -1,198 +0,0 @@
-import {Command as CommandPrimitive} from 'cmdk';
-import type {ComponentProps, ReactNode} from 'react';
-import {useCallback} from 'react';
-import {cn} from 'utils/cn';
-import {Icon} from '../icon';
-import {Kbd} from '../kbd';
-import {Modal, ModalBody, ModalContent, type ModalContentProps} from '../modal/modal';
-import {useSearchContext} from './search-context';
-
-export type SearchContentProps = {
-  breakpoint?: string;
-} & Omit<ModalContentProps, 'open' | 'onOpenChange'>;
-
-export function SearchContent({
-  breakpoint = '(min-width: 768px)',
-  className,
-  children,
-  overlayClassName,
-  onEscapeKeyDown,
-  ...props
-}: SearchContentProps) {
-  const {open, setOpen, searchValue, setSearchValue} = useSearchContext();
-
-  const handleEscapeKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (searchValue) {
-        event.preventDefault();
-        setSearchValue('');
-      } else {
-        onEscapeKeyDown?.(event);
-      }
-    },
-    [searchValue, setSearchValue, onEscapeKeyDown],
-  );
-
-  return (
-    <Modal open={open} onOpenChange={setOpen} breakpoint={breakpoint}>
-      <ModalContent
-        data-slot="search-content"
-        className={cn('top-[15%]! translate-y-0!', className)}
-        overlayClassName={cn('backdrop-blur-sm', overlayClassName)}
-        onEscapeKeyDown={handleEscapeKeyDown}
-        {...props}
-      >
-        <ModalBody className="flex flex-col p-0 min-h-0 overflow-hidden md:overflow-clip">
-          {children}
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-export type SearchInputProps = Omit<
-  ComponentProps<typeof CommandPrimitive.Input>,
-  'value' | 'onValueChange'
->;
-
-export function SearchInput({className, ...props}: SearchInputProps) {
-  const {open, searchValue, setSearchValue} = useSearchContext();
-
-  return (
-    <div className="w-full shrink-0 flex items-center gap-8 border-b border-border-neutral-strong px-16 py-12">
-      <Icon name="searchLine" className="size-16 shrink-0 text-foreground-neutral-muted" />
-      <CommandPrimitive.Input
-        data-slot="search-input"
-        autoFocus={open}
-        value={searchValue}
-        onValueChange={setSearchValue}
-        className={cn(
-          'flex-1 bg-transparent text-sm leading-20 outline-none',
-          'placeholder:text-foreground-neutral-muted',
-          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',
-          className,
-        )}
-        {...props}
-      />
-      <Kbd>Esc</Kbd>
-    </div>
-  );
-}
-
-export type SearchListProps = ComponentProps<typeof CommandPrimitive.List>;
-
-export function SearchList({className, ...props}: SearchListProps) {
-  return (
-    <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 type SearchEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;
-
-export function SearchEmpty({className, ...props}: SearchEmptyProps) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="search-empty"
-      className={cn('py-32 text-center text-sm text-foreground-neutral-muted', className)}
-      {...props}
-    />
-  );
-}
-
-export type SearchGroupProps = ComponentProps<typeof CommandPrimitive.Group>;
-
-export function SearchGroup({className, ...props}: SearchGroupProps) {
-  return (
-    <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 type SearchItemProps = ComponentProps<typeof CommandPrimitive.Item> & {
-  icon?: ReactNode;
-  description?: string;
-};
-
-export function SearchItem({className, children, icon, description, ...props}: SearchItemProps) {
-  return (
-    <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}
-    >
-      {icon && <span className="shrink-0 text-foreground-neutral-muted">{icon}</span>}
-      <div className="flex-1 min-w-0">
-        <div className="truncate">{children}</div>
-        {description && (
-          <div className="truncate text-xs text-foreground-neutral-muted">{description}</div>
-        )}
-      </div>
-    </CommandPrimitive.Item>
-  );
-}
-
-export type SearchSeparatorProps = ComponentProps<typeof CommandPrimitive.Separator>;
-
-export function SearchSeparator({className, ...props}: SearchSeparatorProps) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="search-separator"
-      className={cn('my-8 h-px bg-border-neutral-base', className)}
-      {...props}
-    />
-  );
-}
-
-export type SearchFooterProps = ComponentProps<'div'>;
-
-export function SearchFooter({className, ...props}: SearchFooterProps) {
-  return (
-    <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}
-    >
-      <div className="flex items-center gap-8">
-        <span className="text-xs font-medium text-foreground-neutral-subtle">Navigation</span>
-        <div className="flex items-center gap-4">
-          <Kbd>↓</Kbd>
-          <Kbd>↑</Kbd>
-        </div>
-      </div>
-      <div className="h-12 w-px bg-border-neutral-strong" />
-      <div className="flex items-center gap-8">
-        <span className="text-xs font-medium text-foreground-neutral-subtle">Open result</span>
-        <Kbd>↵</Kbd>
-      </div>
-    </div>
-  );
-}

package/src/components/search/search-trigger.tsx

@@ -1,47 +0,0 @@
-import type {VariantProps} from 'class-variance-authority';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-import {Icon} from '../icon';
-import {Kbd} from '../kbd';
-import {useSearchContext} from './search-context';
-import {searchTriggerVariants} from './search-variants';
-
-export type SearchTriggerProps = ComponentProps<'button'> &
-  VariantProps<typeof searchTriggerVariants> & {
-    placeholder?: string;
-    shortcut?: string;
-  };
-
-export function SearchTrigger({
-  className,
-  variant,
-  size,
-  radius,
-  placeholder = 'Search',
-  shortcut = '⌘K',
-  ...props
-}: SearchTriggerProps) {
-  const {setOpen} = useSearchContext();
-  const isSmall = size === 'small';
-
-  return (
-    <button
-      type="button"
-      data-slot="search-trigger"
-      onClick={() => setOpen(true)}
-      className={cn(searchTriggerVariants({variant, size, radius}), className)}
-      {...props}
-    >
-      <Icon name="searchLine" className={cn('shrink-0', isSmall ? 'size-14' : 'size-16')} />
-      <span className="flex-1 text-left truncate">{placeholder}</span>
-      <Kbd
-        className={cn(
-          isSmall && 'h-16 min-w-16 px-4 text-[10px]',
-          radius === 'rounded' && 'rounded-full',
-        )}
-      >
-        {shortcut}
-      </Kbd>
-    </button>
-  );
-}

package/src/components/search/search-variants.ts

@@ -1,88 +0,0 @@
-import {cva} from 'class-variance-authority';
-import type {Transition} from 'framer-motion';
-
-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: Transition = {
-  type: 'spring',
-  stiffness: 400,
-  damping: 30,
-};
-
-export const SHORTCUT_KEY_REGEX = /^(meta\+|cmd\+|ctrl\+|⌘\+?)/i;