@gv-tech/design-system 2.5.0 → 2.5.2

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

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

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

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

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

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

@@ -1,62 +0,0 @@
-'use client';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-
-import { TabsBaseProps, TabsContentBaseProps, TabsListBaseProps, TabsTriggerBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & TabsListBaseProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & TabsTriggerBaseProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & TabsContentBaseProps
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };
-export type {
-  TabsContentBaseProps as TabsContentProps,
-  TabsListBaseProps as TabsListProps,
-  TabsBaseProps as TabsProps,
-  TabsTriggerBaseProps as TabsTriggerProps,
-};

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

@@ -1,34 +0,0 @@
-import { Text } from '@gv-tech/ui-web';
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-
-describe('Text', () => {
-  it('renders correctly with default variant', () => {
-    render(<Text>Hello World</Text>);
-    const element = screen.getByText('Hello World');
-    expect(element).toBeInTheDocument();
-    expect(element.tagName).toBe('P'); // body is default and maps to <p>
-  });
-
-  it('renders different variants as correct HTML elements', () => {
-    const { rerender } = render(<Text variant="h1">Heading 1</Text>);
-    expect(screen.getByText('Heading 1').tagName).toBe('H1');
-
-    rerender(<Text variant="h2">Heading 2</Text>);
-    expect(screen.getByText('Heading 2').tagName).toBe('H2');
-
-    rerender(<Text variant="h3">Heading 3</Text>);
-    expect(screen.getByText('Heading 3').tagName).toBe('H3');
-
-    rerender(<Text variant="h4">Heading 4</Text>);
-    expect(screen.getByText('Heading 4').tagName).toBe('H4');
-
-    rerender(<Text variant="caption">Caption</Text>);
-    expect(screen.getByText('Caption').tagName).toBe('SPAN');
-  });
-
-  it('applies custom className', () => {
-    render(<Text className="custom-text">Custom Text</Text>);
-    expect(screen.getByText('Custom Text')).toHaveClass('custom-text');
-  });
-});

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

@@ -1,55 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import type { TextBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const textVariants = cva('', {
-  variants: {
-    variant: {
-      h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
-      h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
-      h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
-      h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
-      body: 'leading-7',
-      bodySmall: 'text-sm leading-6',
-      caption: 'text-xs text-muted-foreground',
-      label: 'text-sm font-medium leading-none',
-      overline: 'text-xs font-semibold uppercase tracking-widest text-muted-foreground',
-    },
-  },
-  defaultVariants: {
-    variant: 'body',
-  },
-});
-
-// Map variant to the most semantic HTML element
-const variantElementMap: Record<string, keyof React.JSX.IntrinsicElements> = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  body: 'p',
-  bodySmall: 'p',
-  caption: 'span',
-  label: 'label',
-  overline: 'span',
-};
-
-export interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants>, TextBaseProps {
-  as?: keyof React.JSX.IntrinsicElements;
-}
-
-const Text = React.forwardRef<HTMLElement, TextProps>(
-  ({ className, variant = 'body', as, children, ...props }, ref) => {
-    const Comp = (as || variantElementMap[variant ?? 'body'] || 'p') as React.ElementType;
-    return (
-      <Comp ref={ref} className={cn(textVariants({ variant, className }))} {...props}>
-        {children}
-      </Comp>
-    );
-  },
-);
-Text.displayName = 'Text';
-
-export { Text, textVariants };

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

@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { Textarea } from '.';
-
-describe('Textarea', () => {
-  it('renders correctly', () => {
-    render(<Textarea placeholder="Type here" />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument();
-  });
-
-  it('accepts user input', async () => {
-    const user = userEvent.setup();
-    render(<Textarea />);
-    const textarea = screen.getByRole('textbox');
-
-    await user.type(textarea, 'Hello World');
-    expect(textarea).toHaveValue('Hello World');
-  });
-});

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

@@ -1,25 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { TextareaBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-export interface TextareaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaBaseProps>, TextareaBaseProps {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Textarea.displayName = 'Textarea';
-
-export { Textarea };

package/packages/ui-web/src/theme-provider.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { ThemeProviderBaseProps } from '@gv-tech/ui-core';
-import type { ThemeProviderProps as NextThemesProviderProps } from 'next-themes';
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-
-export type ThemeProviderProps = NextThemesProviderProps & ThemeProviderBaseProps;
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return (
-    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem {...props}>
-      {children}
-    </NextThemesProvider>
-  );
-}

package/packages/ui-web/src/theme-toggle.test.tsx

@@ -1,49 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ThemeProvider } from 'next-themes';
-import { describe, expect, it, vi } from 'vitest';
-import { ThemeToggle } from './theme-toggle';
-
-// Mock the useTheme hook to control its return values
-vi.mock('./hooks/use-theme', async () => {
-  const actual = await vi.importActual('./hooks/use-theme');
-  return {
-    ...actual,
-    useTheme: () => ({
-      theme: 'light',
-      setTheme: vi.fn(),
-      resolvedTheme: 'light',
-      tokens: {},
-    }),
-  };
-});
-
-describe('ThemeToggle', () => {
-  it('renders binary toggle by default', () => {
-    render(
-      <ThemeProvider>
-        <ThemeToggle />
-      </ThemeProvider>,
-    );
-    // Use role button which is accessible
-    const button = screen.getByRole('button', { name: /toggle theme/i });
-    expect(button).toBeInTheDocument();
-  });
-
-  it('renders ternary toggle with dropdown', async () => {
-    const user = userEvent.setup();
-    render(
-      <ThemeProvider>
-        <ThemeToggle variant="ternary" />
-      </ThemeProvider>,
-    );
-    const button = screen.getByRole('button'); // Dropdown trigger
-    expect(button).toBeInTheDocument();
-
-    // Open dropdown
-    await user.click(button);
-    expect(await screen.findByText('Light')).toBeInTheDocument();
-    expect(screen.getByText('Dark')).toBeInTheDocument();
-    expect(screen.getByText('System')).toBeInTheDocument();
-  });
-});

package/packages/ui-web/src/theme-toggle.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import { ThemeToggleBaseProps } from '@gv-tech/ui-core';
-import { Moon, Sun, SunMoon } from 'lucide-react';
-import { Button } from './button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu';
-import { useTheme } from './hooks/use-theme';
-import { cn } from './lib/utils';
-
-export type ThemeToggleProps = ThemeToggleBaseProps;
-
-export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
-  const { theme: nextTheme, setTheme: setNextTheme, resolvedTheme } = useTheme();
-
-  // Use customTheme if provided, otherwise fallback to next-themes
-  const currentTheme = customTheme ?? nextTheme;
-
-  // Determine the effective theme for icon rendering
-  const effectiveTheme = customTheme ? customTheme : resolvedTheme;
-  const isDark = effectiveTheme === 'dark';
-  const isSystem = currentTheme === 'system';
-
-  const handleThemeChange = (newTheme: string) => {
-    if (onThemeChange) {
-      onThemeChange(newTheme);
-    } else {
-      setNextTheme(newTheme);
-    }
-  };
-
-  const IconToggle = () => (
-    <>
-      <Sun
-        className={cn(
-          'h-[1.2rem] w-[1.2rem] transition-all',
-          !isSystem && !isDark ? 'rotate-0 scale-100' : '-rotate-90 scale-0',
-        )}
-      />
-      <Moon
-        className={cn(
-          'absolute h-[1.2rem] w-[1.2rem] transition-all',
-          !isSystem && isDark ? 'rotate-0 scale-100' : 'rotate-90 scale-0',
-        )}
-      />
-      <SunMoon
-        className={cn(
-          'absolute h-[1.2rem] w-[1.2rem] transition-all',
-          isSystem ? 'rotate-0 scale-100' : 'rotate-90 scale-0',
-        )}
-      />
-      <span className="sr-only">Toggle theme</span>
-    </>
-  );
-
-  if (variant === 'ternary') {
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className={cn('relative h-9 w-9', className)}>
-            <IconToggle />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuItem onClick={() => handleThemeChange('light')}>
-            <Sun className="mr-2 h-4 w-4" />
-            <span>Light</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => handleThemeChange('dark')}>
-            <Moon className="mr-2 h-4 w-4" />
-            <span>Dark</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => handleThemeChange('system')}>
-            <SunMoon className="mr-2 h-4 w-4" />
-            <span>System</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className={cn('relative h-9 w-9', className)}
-      onClick={() => handleThemeChange(currentTheme === 'dark' ? 'light' : 'dark')}
-      aria-label="Toggle theme"
-    >
-      <IconToggle />
-    </Button>
-  );
-}

package/packages/ui-web/src/toast.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 { useToast } from './hooks/use-toast';
-import { Toaster } from './toaster';
-
-// Test component to trigger toasts
-const ToastTrigger = () => {
-  const { toast } = useToast();
-  return (
-    <button
-      onClick={() =>
-        toast({
-          title: 'Test Toast',
-          description: 'This is a test message',
-        })
-      }
-    >
-      Show Toast
-    </button>
-  );
-};
-
-describe('Toast', () => {
-  it('shows toast when triggered', async () => {
-    const user = userEvent.setup();
-    render(
-      <>
-        <Toaster />
-        <ToastTrigger />
-      </>,
-    );
-
-    expect(screen.queryByText('Test Toast')).not.toBeInTheDocument();
-
-    await user.click(screen.getByText('Show Toast'));
-
-    // Toast might take a moment to appear (animation)
-    expect(await screen.findByText('Test Toast')).toBeInTheDocument();
-    expect(screen.getByText('This is a test message')).toBeInTheDocument();
-  });
-});