@gv-tech/design-system 2.3.0 → 2.5.0

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,28 @@
+'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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,59 @@
+'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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,42 @@
+'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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,87 @@
+'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

@@ -0,0 +1,42 @@
+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();
+  });
+});

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

@@ -0,0 +1,169 @@
+'use client';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import {
+  SelectBaseProps,
+  SelectContentBaseProps,
+  SelectGroupBaseProps,
+  SelectItemBaseProps,
+  SelectLabelBaseProps,
+  SelectScrollDownButtonBaseProps,
+  SelectScrollUpButtonBaseProps,
+  SelectSeparatorBaseProps,
+  SelectTriggerBaseProps,
+  SelectValueBaseProps,
+} from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & SelectTriggerBaseProps
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & SelectScrollUpButtonBaseProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & SelectScrollDownButtonBaseProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & SelectContentBaseProps
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-select-content-transform-origin]',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & SelectLabelBaseProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & SelectItemBaseProps
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & SelectSeparatorBaseProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
+
+export type {
+  SelectContentBaseProps as SelectContentProps,
+  SelectGroupBaseProps as SelectGroupProps,
+  SelectItemBaseProps as SelectItemProps,
+  SelectLabelBaseProps as SelectLabelProps,
+  SelectBaseProps as SelectProps,
+  SelectScrollDownButtonBaseProps as SelectScrollDownButtonProps,
+  SelectScrollUpButtonBaseProps as SelectScrollUpButtonProps,
+  SelectSeparatorBaseProps as SelectSeparatorProps,
+  SelectTriggerBaseProps as SelectTriggerProps,
+  SelectValueBaseProps as SelectValueProps,
+};

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

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Separator } from '.';
+
+describe('Separator', () => {
+  it('renders correctly', () => {
+    render(<Separator data-testid="separator" />);
+    expect(screen.getByTestId('separator')).toBeInTheDocument();
+    expect(screen.getByTestId('separator')).toHaveClass('bg-border');
+  });
+
+  it('applies orientation classes', () => {
+    render(<Separator orientation="vertical" data-testid="separator-vertical" />);
+    expect(screen.getByTestId('separator-vertical')).toHaveClass('h-full w-[1px]');
+  });
+});