@gv-tech/design-system 2.5.0 → 2.5.2

package/packages/ui-web/src/pagination.tsx

@@ -1,107 +0,0 @@
-import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import * as React from 'react';
-
-import {
-  PaginationBaseProps,
-  PaginationContentBaseProps,
-  PaginationEllipsisBaseProps,
-  PaginationItemBaseProps,
-  PaginationLinkBaseProps,
-  PaginationNextBaseProps,
-  PaginationPreviousBaseProps,
-} from '@gv-tech/ui-core';
-import { ButtonProps, buttonVariants } from './button';
-import { cn } from './lib/utils';
-
-const Pagination = ({ className, ...props }: React.ComponentProps<'nav'> & PaginationBaseProps) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn('mx-auto flex w-full justify-center', className)}
-    {...props}
-  />
-);
-Pagination.displayName = 'Pagination';
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'> & PaginationContentBaseProps>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
-  ),
-);
-PaginationContent.displayName = 'PaginationContent';
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'> & PaginationItemBaseProps>(
-  ({ className, ...props }, ref) => <li ref={ref} className={cn('', className)} {...props} />,
-);
-PaginationItem.displayName = 'PaginationItem';
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, 'size'> &
-  React.ComponentProps<'a'> &
-  PaginationLinkBaseProps;
-
-const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? 'page' : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? 'outline' : 'ghost',
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = 'PaginationLink';
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink> & PaginationPreviousBaseProps) => (
-  <PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = 'PaginationPrevious';
-
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink> & PaginationNextBaseProps) => (
-  <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = 'PaginationNext';
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'> & PaginationEllipsisBaseProps) => (
-  <span aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = 'PaginationEllipsis';
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-};
-
-export type {
-  PaginationContentBaseProps as PaginationContentProps,
-  PaginationEllipsisBaseProps as PaginationEllipsisProps,
-  PaginationItemBaseProps as PaginationItemProps,
-  PaginationLinkProps,
-  PaginationNextBaseProps as PaginationNextProps,
-  PaginationPreviousBaseProps as PaginationPreviousProps,
-  PaginationBaseProps as PaginationProps,
-};

package/packages/ui-web/src/popover.test.tsx

@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { Popover, PopoverContent, PopoverTrigger } from '.';
-
-describe('Popover', () => {
-  it('renders trigger correctly', () => {
-    render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent>Content</PopoverContent>
-      </Popover>,
-    );
-
-    expect(screen.getByText('Open')).toBeInTheDocument();
-  });
-
-  it('opens content on click', async () => {
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <PopoverTrigger>Open</PopoverTrigger>
-        <PopoverContent>Content</PopoverContent>
-      </Popover>,
-    );
-
-    await user.click(screen.getByText('Open'));
-
-    expect(screen.getByText('Content')).toBeVisible();
-  });
-});

package/packages/ui-web/src/popover.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as React from 'react';
-
-import {
-  PopoverAnchorBaseProps,
-  PopoverBaseProps,
-  PopoverContentBaseProps,
-  PopoverTriggerBaseProps,
-} from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & PopoverContentBaseProps
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
-export type {
-  PopoverAnchorBaseProps as PopoverAnchorProps,
-  PopoverContentBaseProps as PopoverContentProps,
-  PopoverBaseProps as PopoverProps,
-  PopoverTriggerBaseProps as PopoverTriggerProps,
-};

package/packages/ui-web/src/progress.test.tsx

@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Progress } from '.';
-
-describe('Progress', () => {
-  it('renders correctly', () => {
-    render(<Progress value={50} aria-label="progress-bar" />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50');
-  });
-
-  it('renders correctly with no value', () => {
-    render(<Progress aria-label="progress-bar" />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-    // When value is undefined, Radix UI might behave in specific ways, typically indeterminate or 0.
-    // Our wrapper: transform: `translateX(-${100 - (value || 0)}%)` -> -100%
-  });
-});

package/packages/ui-web/src/progress.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-import * as React from 'react';
-
-import { ProgressBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & ProgressBaseProps
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
-    value={value}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
-export type { ProgressBaseProps as ProgressProps };

package/packages/ui-web/src/radio-group.test.tsx

@@ -1,39 +0,0 @@
-import { RadioGroup, RadioGroupItem } from '@gv-tech/ui-web';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-
-describe('RadioGroup', () => {
-  it('renders correctly', () => {
-    render(
-      <RadioGroup defaultValue="option-one">
-        <RadioGroupItem value="option-one" id="option-one" aria-label="Option One" />
-        <RadioGroupItem value="option-two" id="option-two" aria-label="Option Two" />
-      </RadioGroup>,
-    );
-
-    expect(screen.getByRole('radio', { name: /Option One/i })).toBeInTheDocument();
-    // Radix RadioGroup renders standard inputs visually hidden.
-    // Testing library query by role 'radio' should find them.
-    // However, since we didn't provide labels, we might need to rely on 'checked' state or IDs.
-
-    const radio1 = screen.getByRole('radio', { checked: true });
-    expect(radio1).toBeInTheDocument();
-    expect(radio1).toHaveValue('option-one');
-  });
-
-  it('changes value on click', async () => {
-    const user = userEvent.setup();
-    render(
-      <RadioGroup defaultValue="option-one">
-        <RadioGroupItem value="option-one" />
-        <RadioGroupItem value="option-two" data-testid="radio-two" />
-      </RadioGroup>,
-    );
-
-    const radio2 = screen.getByTestId('radio-two');
-    await user.click(radio2);
-
-    expect(radio2).toBeChecked();
-  });
-});

package/packages/ui-web/src/radio-group.tsx

@@ -1,41 +0,0 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
-import * as React from 'react';
-
-import type { RadioGroupBaseProps, RadioGroupItemBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-export interface RadioGroupProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, RadioGroupBaseProps {}
-
-const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
-  ({ className, ...props }, ref) => {
-    return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
-  },
-);
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-export interface RadioGroupItemProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemBaseProps {}
-
-const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <RadioGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        {...props}
-      >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-          <Circle className="h-3.5 w-3.5 fill-primary" />
-        </RadioGroupPrimitive.Indicator>
-      </RadioGroupPrimitive.Item>
-    );
-  },
-);
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };

package/packages/ui-web/src/resizable.test.tsx

@@ -1,23 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '.';
-
-describe('Resizable', () => {
-  it('renders correctly', () => {
-    // Basic render test
-    render(
-      <ResizablePanelGroup direction="horizontal">
-        <ResizablePanel defaultSize={50}>
-          <div>One</div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={50}>
-          <div>Two</div>
-        </ResizablePanel>
-      </ResizablePanelGroup>,
-    );
-
-    expect(screen.getByText('One')).toBeInTheDocument();
-    expect(screen.getByText('Two')).toBeInTheDocument();
-  });
-});

package/packages/ui-web/src/resizable.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { GripVertical } from 'lucide-react';
-import * as React from 'react';
-import { Group, Panel, Separator } from 'react-resizable-panels';
-
-import { ResizableHandleBaseProps, ResizablePanelBaseProps, ResizablePanelGroupBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-// Assuming newer version uses PanelGroup/PanelResizeHandle, but user code used Group/Separator.
-// Let's check if PanelGroup exists, if not fallback to Group.
-// Actually, I should inspect the user's code again.
-// User code:
-// const ResizablePanelGroup = ({ ... }: React.ComponentProps<typeof Group> ...
-// const ResizableHandle = ({ ... }: React.ComponentProps<typeof Separator> ...
-
-// It seems the user is using an older version or a specific version where Group and Separator are the exports.
-// I will align with user's code.
-
-const ResizablePanelGroup = ({
-  className,
-  direction,
-  ...props
-}: React.ComponentProps<typeof Group> & ResizablePanelGroupBaseProps) => (
-  <Group
-    orientation={direction}
-    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
-    {...props}
-  />
-);
-
-const ResizablePanel = Panel;
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator> & ResizableHandleBaseProps) => (
-  <Separator
-    className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
-      className,
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </Separator>
-);
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
-export type {
-  ResizableHandleBaseProps as ResizableHandleProps,
-  ResizablePanelGroupBaseProps as ResizablePanelGroupProps,
-  ResizablePanelBaseProps as ResizablePanelProps,
-};

package/packages/ui-web/src/scroll-area.test.tsx

@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { ScrollArea, ScrollBar } from '.';
-
-describe('ScrollArea', () => {
-  it('renders correctly', () => {
-    render(
-      <ScrollArea className="h-[200px] w-[350px]">
-        <div>Content</div>
-        <ScrollBar />
-      </ScrollArea>,
-    );
-    expect(screen.getByText('Content')).toBeInTheDocument();
-  });
-});

package/packages/ui-web/src/scroll-area.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import * as React from 'react';
-
-import { ScrollAreaBaseProps, ScrollBarBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & ScrollAreaBaseProps
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & ScrollBarBaseProps
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
-export type { ScrollAreaBaseProps as ScrollAreaProps, ScrollBarBaseProps as ScrollBarProps };

package/packages/ui-web/src/search.test.tsx

@@ -1,81 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import * as React from 'react';
-import { describe, expect, it, vi } from 'vitest';
-import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Search, SearchTrigger } from '.';
-
-// Mock CommandDialog since it uses Radix Dialog which might need a portal
-vi.mock('@gv-tech/ui-web', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@gv-tech/ui-web')>();
-  return {
-    ...actual,
-    Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) => (open ? <div>{children}</div> : null),
-    DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    DialogPortal: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-    DialogOverlay: () => null,
-    DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
-    DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
-  };
-});
-
-describe('Search', () => {
-  it('renders search trigger', () => {
-    render(<SearchTrigger />);
-    expect(screen.getByText('Search docs...')).toBeInTheDocument();
-  });
-
-  it('opens search dialog when trigger is clicked (controlled)', () => {
-    const onOpenChange = vi.fn();
-    render(
-      <Search open={false} onOpenChange={onOpenChange}>
-        <CommandInput placeholder="Search..." />
-      </Search>,
-    );
-
-    // The dialog should be closed initially
-    expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
-  });
-
-  it('responds to keyboard shortcuts', () => {
-    render(
-      <Search>
-        <CommandInput placeholder="Search..." />
-        <CommandList>
-          <CommandItem>Result 1</CommandItem>
-        </CommandList>
-      </Search>,
-    );
-
-    // Simulate Cmd+K
-    fireEvent.keyDown(document, { key: 'k', metaKey: true });
-
-    // Check if dialog content is visible
-    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-  });
-
-  it('filters results correctly', () => {
-    render(
-      <Search open={true}>
-        <CommandInput placeholder="Search..." />
-        <CommandList>
-          <CommandEmpty>No results.</CommandEmpty>
-          <CommandGroup heading="Components">
-            <SearchItem>Button</SearchItem>
-            <SearchItem>Input</SearchItem>
-          </CommandGroup>
-        </CommandList>
-      </Search>,
-    );
-
-    const input = screen.getByPlaceholderText('Search...');
-    fireEvent.change(input, { target: { value: 'But' } });
-
-    expect(screen.getByText('Button')).toBeInTheDocument();
-    // cmdk removes non-matching items from the DOM
-    expect(screen.queryByText('Input')).not.toBeInTheDocument();
-  });
-});
-
-// Helper component for testing
-function SearchItem({ children }: { children: React.ReactNode }) {
-  return <CommandItem>{children}</CommandItem>;
-}

package/packages/ui-web/src/search.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import { SearchBaseProps, SearchTriggerBaseProps } from '@gv-tech/ui-core';
-import { Search as SearchIcon } from 'lucide-react';
-import * as React from 'react';
-import { Button } from './button';
-import { CommandDialog } from './command';
-import { cn } from './lib/utils';
-
-export type SearchProps = SearchBaseProps;
-
-export function Search({ children, open: customOpen, onOpenChange }: SearchProps) {
-  const [open, setOpen] = React.useState(false);
-
-  // If customOpen is provided (controlled), use it. Otherwise use internal state.
-  // Note: customOpen can be undefined, so we check explicit undefined check or just rely on contract.
-  const isControlled = customOpen !== undefined;
-  const isOpen = isControlled ? (customOpen as boolean) : open;
-
-  // We need a setter that matches Dispatch<SetStateAction<boolean>> roughly,
-  // but handles the controlled callback.
-  const setIsOpen = React.useCallback(
-    (value: boolean | ((prev: boolean) => boolean)) => {
-      let nextValue: boolean;
-      if (typeof value === 'function') {
-        nextValue = value(isOpen);
-      } else {
-        nextValue = value;
-      }
-
-      if (isControlled) {
-        onOpenChange?.(nextValue);
-      } else {
-        setOpen(nextValue);
-      }
-    },
-    [isControlled, isOpen, onOpenChange],
-  );
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setIsOpen((prev) => !prev);
-      }
-    };
-
-    document.addEventListener('keydown', down);
-    return () => document.removeEventListener('keydown', down);
-  }, [setIsOpen]);
-
-  return (
-    <CommandDialog open={isOpen} onOpenChange={setIsOpen}>
-      {children}
-    </CommandDialog>
-  );
-}
-
-export interface SearchTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, SearchTriggerBaseProps {}
-
-export const SearchTrigger = React.forwardRef<HTMLButtonElement, SearchTriggerProps>(
-  ({ className, placeholder = 'Search docs...', variant = 'default', ...props }, ref) => {
-    return (
-      <Button
-        variant="outline"
-        className={cn(
-          'relative h-9 text-sm text-muted-foreground transition-all transition-colors',
-          variant === 'default'
-            ? 'w-full justify-start pr-12'
-            : 'w-9 justify-center px-0 md:w-40 md:justify-start md:px-3 md:pr-12 lg:w-64',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      >
-        <span className="inline-flex items-center gap-2">
-          <SearchIcon className="h-4 w-4 shrink-0" />
-          <span className={cn('truncate', variant === 'compact' && 'hidden md:inline')}>{placeholder}</span>
-        </span>
-        <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-          <span className="text-xs">⌘</span>K
-        </kbd>
-      </Button>
-    );
-  },
-);
-SearchTrigger.displayName = 'SearchTrigger';

package/packages/ui-web/src/select.test.tsx

@@ -1,42 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.';
-
-describe('Select', () => {
-  it('renders correctly', () => {
-    render(
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>,
-    );
-    expect(screen.getByText('Select an option')).toBeInTheDocument();
-  });
-
-  it('opens and selects an option', async () => {
-    const user = userEvent.setup();
-    render(
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>,
-    );
-
-    await user.click(screen.getByRole('combobox'));
-    expect(screen.getByText('Option 1')).toBeVisible();
-
-    await user.click(screen.getByText('Option 1'));
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-  });
-});