@gv-tech/design-system 2.3.0 → 2.5.0

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

@@ -0,0 +1,24 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+
+import { SeparatorBaseProps } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & SeparatorBaseProps
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
+export type { SeparatorBaseProps as SeparatorProps };

package/packages/ui-web/src/setupTests.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// ResizeObserver polyfill
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// IntersectionObserver polyfill
+global.IntersectionObserver = class IntersectionObserver {
+  readonly root: Element | Document | null = null;
+  readonly rootMargin: string = '';
+  readonly thresholds: ReadonlyArray<number> = [];
+
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.root = options?.root ?? null;
+    this.rootMargin = options?.rootMargin ?? '';
+    this.thresholds = options?.threshold
+      ? Array.isArray(options.threshold)
+        ? options.threshold
+        : [options.threshold]
+      : [];
+  }
+
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+};
+
+// matchMedia polyfill
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// PointerEvent polyfill (simplified)
+if (!global.PointerEvent) {
+  class PointerEvent extends MouseEvent {
+    public height: number;
+    public isPrimary: boolean;
+    public pointerId: number;
+    public pointerType: string;
+    public pressure: number;
+    public tangentialPressure: number;
+    public tiltX: number;
+    public tiltY: number;
+    public twist: number;
+    public width: number;
+
+    constructor(type: string, params: PointerEventInit = {}) {
+      super(type, params);
+      this.pointerId = params.pointerId || 0;
+      this.width = params.width || 0;
+      this.height = params.height || 0;
+      this.pressure = params.pressure || 0;
+      this.tangentialPressure = params.tangentialPressure || 0;
+      this.tiltX = params.tiltX || 0;
+      this.tiltY = params.tiltY || 0;
+      this.twist = params.twist || 0;
+      this.pointerType = params.pointerType || '';
+      this.isPrimary = params.isPrimary || false;
+    }
+  }
+  global.PointerEvent = PointerEvent as any;
+  window.PointerEvent = PointerEvent as any;
+}
+
+// Layout mocks
+Object.defineProperties(HTMLElement.prototype, {
+  offsetParent: {
+    get() {
+      return this.parentNode;
+    },
+  },
+  offsetLeft: {
+    get() {
+      return 0;
+    },
+  },
+  offsetTop: {
+    get() {
+      return 0;
+    },
+  },
+  offsetHeight: {
+    get() {
+      return 100;
+    },
+  },
+  offsetWidth: {
+    get() {
+      return 100;
+    },
+  },
+});
+
+window.HTMLElement.prototype.scrollIntoView = vi.fn();
+window.HTMLElement.prototype.releasePointerCapture = vi.fn();
+window.HTMLElement.prototype.hasPointerCapture = vi.fn();

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

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '.';
+
+// Mock ResizeObserver for Radix UI
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+describe('Sheet', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    expect(screen.getByText('Open Sheet')).toBeInTheDocument();
+  });
+
+  it('opens content on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+          <div>Sheet Content</div>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    await user.click(screen.getByText('Open Sheet'));
+    expect(screen.getByText('Sheet Content')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,136 @@
+'use client';
+
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import {
+  SheetBaseProps,
+  SheetCloseBaseProps,
+  SheetContentBaseProps,
+  SheetDescriptionBaseProps,
+  SheetFooterBaseProps,
+  SheetHeaderBaseProps,
+  SheetOverlayBaseProps,
+  SheetPortalBaseProps,
+  SheetTitleBaseProps,
+  SheetTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & SheetOverlayBaseProps
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+);
+
+interface SheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants>,
+    Omit<SheetContentBaseProps, 'side'> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = 'right', className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+        {children}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement> & SheetHeaderBaseProps) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement> & SheetFooterBaseProps) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & SheetTitleBaseProps
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & SheetDescriptionBaseProps
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
+
+export type {
+  SheetCloseBaseProps as SheetCloseProps,
+  SheetContentProps,
+  SheetDescriptionBaseProps as SheetDescriptionProps,
+  SheetFooterBaseProps as SheetFooterProps,
+  SheetHeaderBaseProps as SheetHeaderProps,
+  SheetOverlayBaseProps as SheetOverlayProps,
+  SheetPortalBaseProps as SheetPortalProps,
+  SheetBaseProps as SheetProps,
+  SheetTitleBaseProps as SheetTitleProps,
+  SheetTriggerBaseProps as SheetTriggerProps,
+};

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

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Skeleton } from '.';
+
+describe('Skeleton', () => {
+  it('renders correctly', () => {
+    render(<Skeleton data-testid="skeleton" className="h-4 w-[250px]" />);
+    const skeleton = screen.getByTestId('skeleton');
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveClass('animate-pulse');
+    expect(skeleton).toHaveClass('h-4');
+  });
+});

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

@@ -0,0 +1,10 @@
+import { SkeletonBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { cn } from './lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement> & SkeletonBaseProps) {
+  return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />;
+}
+
+export { Skeleton };
+export type { SkeletonBaseProps as SkeletonProps };

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

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Slider } from '.';
+
+describe('Slider', () => {
+  it('renders correctly', () => {
+    // Radix Slider uses ResizeObserver
+    global.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+
+    render(<Slider defaultValue={[50]} max={100} step={1} />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '50');
+  });
+});

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

@@ -0,0 +1,27 @@
+'use client';
+
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
+
+import { SliderBaseProps } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & SliderBaseProps
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
+export type { SliderBaseProps as SliderProps };

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

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Toaster } from '.';
+
+describe('Sonner Toaster', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Toaster />);
+    // Sonner renders a list/container. Since it's a portal or fixed, we check presence.
+    // However, without triggering a toast, it might be empty or hidden.
+    // We check if the container renders without crashing.
+    expect(container).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,32 @@
+'use client';
+
+import { SonnerBaseProps } from '@gv-tech/ui-core';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner> & SonnerBaseProps;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
+export type { ToasterProps };

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

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Switch } from '.';
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    render(<Switch data-testid="switch" />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('toggles state', async () => {
+    const user = userEvent.setup();
+    render(<Switch />);
+
+    const switchEl = screen.getByRole('switch');
+    expect(switchEl).toHaveAttribute('aria-checked', 'false');
+
+    await user.click(switchEl);
+    expect(switchEl).toHaveAttribute('aria-checked', 'true');
+  });
+});

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

@@ -0,0 +1,31 @@
+'use client';
+
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+
+import { SwitchBaseProps } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & SwitchBaseProps
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
+export type { SwitchBaseProps as SwitchProps };

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

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '.';
+
+describe('Table', () => {
+  it('renders correctly', () => {
+    render(
+      <Table>
+        <TableCaption>A list of invoices.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Invoice</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell className="font-medium">INV001</TableCell>
+            <TableCell>Paid</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('A list of invoices.')).toBeInTheDocument();
+    expect(screen.getByText('INV001')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+
+import {
+  TableBaseProps,
+  TableBodyBaseProps,
+  TableCaptionBaseProps,
+  TableCellBaseProps,
+  TableFooterBaseProps,
+  TableHeadBaseProps,
+  TableHeaderBaseProps,
+  TableRowBaseProps,
+} from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement> & TableBaseProps>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & TableHeaderBaseProps
+>(({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & TableBodyBaseProps
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement> & TableFooterBaseProps
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement> & TableRowBaseProps>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement> & TableHeadBaseProps
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement> & TableCaptionBaseProps
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+));
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export type {
+  TableBodyBaseProps as TableBodyProps,
+  TableCaptionBaseProps as TableCaptionProps,
+  TableCellBaseProps as TableCellProps,
+  TableFooterBaseProps as TableFooterProps,
+  TableHeaderBaseProps as TableHeaderProps,
+  TableHeadBaseProps as TableHeadProps,
+  TableBaseProps as TableProps,
+  TableRowBaseProps as TableRowProps,
+};

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

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '.';
+
+describe('Tabs', () => {
+  it('renders correctly', () => {
+    render(
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Content</TabsContent>
+        <TabsContent value="password">Password Content</TabsContent>
+      </Tabs>,
+    );
+
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Account' })).toBeInTheDocument();
+
+    // Default value shows Account Content
+    expect(screen.getByText('Account Content')).toBeVisible();
+    expect(screen.queryByText('Password Content')).not.toBeInTheDocument();
+  });
+
+  it('switches tabs', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Content</TabsContent>
+        <TabsContent value="password">Password Content</TabsContent>
+      </Tabs>,
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Password' }));
+    expect(screen.getByText('Password Content')).toBeVisible();
+  });
+});