@gv-tech/design-system 2.5.0 → 2.5.2

package/packages/ui-web/src/alert-dialog.tsx

@@ -1,121 +0,0 @@
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as React from 'react';
-
-import {
-  AlertDialogActionBaseProps,
-  AlertDialogBaseProps,
-  AlertDialogCancelBaseProps,
-  AlertDialogContentBaseProps,
-  AlertDialogDescriptionBaseProps,
-  AlertDialogFooterBaseProps,
-  AlertDialogHeaderBaseProps,
-  AlertDialogTitleBaseProps,
-} from '@gv-tech/ui-core';
-import { buttonVariants } from './button';
-import { cn } from './lib/utils';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.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}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & AlertDialogContentBaseProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & AlertDialogHeaderBaseProps) => (
-  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & AlertDialogFooterBaseProps) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & AlertDialogTitleBaseProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & AlertDialogDescriptionBaseProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & AlertDialogActionBaseProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & AlertDialogCancelBaseProps
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};
-export type { AlertDialogBaseProps as AlertDialogProps };

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

@@ -1,47 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Alert, AlertDescription, AlertTitle } from './alert';
-
-describe('Alert', () => {
-  it('renders correctly', () => {
-    render(
-      <Alert>
-        <AlertTitle>Heads up!</AlertTitle>
-        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole('alert');
-    expect(alert).toBeInTheDocument();
-    expect(screen.getByText('Heads up!')).toBeInTheDocument();
-    expect(screen.getByText('You can add components to your app using the cli.')).toBeInTheDocument();
-  });
-
-  it('renders destructive variant', () => {
-    render(
-      <Alert variant="destructive">
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>Your session has expired.</AlertDescription>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole('alert');
-    expect(alert).toBeInTheDocument();
-    expect(alert).toHaveClass('border-destructive/50');
-    expect(alert).toHaveClass('text-destructive');
-  });
-
-  it('renders info variant', () => {
-    render(
-      <Alert variant="info">
-        <AlertTitle>Info</AlertTitle>
-        <AlertDescription>This is an informational message.</AlertDescription>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole('alert');
-    expect(alert).toBeInTheDocument();
-    expect(alert).toHaveClass('border-blue-500/50');
-    expect(alert).toHaveClass('text-blue-600');
-  });
-});

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

@@ -1,49 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { AlertBaseProps, AlertDescriptionBaseProps, AlertTitleBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-        warning:
-          'border-amber-500/50 bg-amber-500/10 text-amber-600 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400',
-        info: 'border-blue-500/50 bg-blue-500/10 text-blue-600 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & AlertBaseProps & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement> & AlertTitleBaseProps>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
-  ),
-);
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & AlertDescriptionBaseProps
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertDescription, AlertTitle };
-export type { AlertBaseProps as AlertProps };

package/packages/ui-web/src/aspect-ratio.test.tsx

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { AspectRatio } from '.';
-
-describe('AspectRatio', () => {
-  it('renders correctly', () => {
-    const { container } = render(
-      <AspectRatio ratio={16 / 9}>
-        <img src="test.jpg" alt="test" />
-      </AspectRatio>,
-    );
-
-    const img = screen.getByRole('img');
-    expect(img).toBeInTheDocument();
-
-    // Radix AspectRatio renders a wrapper with padding-bottom based on ratio
-    // We can check if the wrapper style is applied
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ paddingBottom: expect.stringMatching(/%$/) });
-  });
-
-  it('renders with custom ratio', () => {
-    const { container } = render(
-      <AspectRatio ratio={1 / 1}>
-        <div>Square</div>
-      </AspectRatio>,
-    );
-
-    expect(screen.getByText('Square')).toBeInTheDocument();
-    const wrapper = container.firstChild;
-    // 1/1 ratio should be 100% padding-bottom
-    expect(wrapper).toHaveStyle({ paddingBottom: '100%' });
-  });
-});

package/packages/ui-web/src/aspect-ratio.tsx

@@ -1,7 +0,0 @@
-import { AspectRatioBaseProps } from '@gv-tech/ui-core';
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };
-export type { AspectRatioBaseProps as AspectRatioProps };

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

@@ -1,33 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Avatar, AvatarFallback, AvatarImage } from './avatar';
-
-describe('Avatar', () => {
-  it('renders correctly', () => {
-    render(
-      <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>,
-    );
-
-    // In JSDOM, image loading might not happen immediately or at all without mocking.
-    // However, the elements should be in the DOM.
-    // Radix conditionally renders Image or Fallback.
-    // By default, it might render Image and hide Fallback, or vice versa depending on loading.
-
-    // Let's check that the root is present
-    const avatar = screen.getByText('CN')?.parentElement || screen.getByRole('img').parentElement;
-    expect(avatar).toBeInTheDocument();
-  });
-
-  it('renders fallback when image is missing', () => {
-    render(
-      <Avatar>
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>,
-    );
-
-    expect(screen.getByText('CN')).toBeInTheDocument();
-  });
-});

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

@@ -1,40 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as React from 'react';
-
-import { AvatarBaseProps, AvatarFallbackBaseProps, AvatarImageBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & AvatarBaseProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & AvatarImageBaseProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & AvatarFallbackBaseProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarFallback, AvatarImage };
-export type { AvatarBaseProps as AvatarProps };

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

@@ -1,24 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Badge } from './badge';
-
-describe('Badge', () => {
-  it('renders correctly', () => {
-    render(<Badge>Test Badge</Badge>);
-    expect(screen.getByText('Test Badge')).toBeInTheDocument();
-  });
-
-  it('renders variants', () => {
-    const { rerender, getByText } = render(<Badge variant="default">Default</Badge>);
-    expect(getByText('Default')).toHaveClass('bg-primary');
-
-    rerender(<Badge variant="secondary">Secondary</Badge>);
-    expect(getByText('Secondary')).toHaveClass('bg-secondary');
-
-    rerender(<Badge variant="destructive">Destructive</Badge>);
-    expect(getByText('Destructive')).toHaveClass('bg-destructive');
-
-    rerender(<Badge variant="outline">Outline</Badge>);
-    expect(getByText('Outline')).toHaveClass('text-foreground');
-  });
-});

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

@@ -1,34 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { BadgeBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-export interface BadgeProps
-  extends
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'variant'>,
-    Omit<BadgeBaseProps, 'variant'>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

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

@@ -1,105 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import * as React from 'react';
-
-import {
-  BreadcrumbBaseProps,
-  BreadcrumbEllipsisBaseProps,
-  BreadcrumbItemBaseProps,
-  BreadcrumbLinkBaseProps,
-  BreadcrumbListBaseProps,
-  BreadcrumbPageBaseProps,
-  BreadcrumbSeparatorBaseProps,
-} from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<'nav'> &
-    BreadcrumbBaseProps & {
-      separator?: React.ReactNode;
-    }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = 'Breadcrumb';
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<'ol'> & BreadcrumbListBaseProps
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
-      className,
-    )}
-    {...props}
-  />
-));
-BreadcrumbList.displayName = 'BreadcrumbList';
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'> & BreadcrumbItemBaseProps>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-  ),
-);
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<'a'> & BreadcrumbLinkBaseProps
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'a';
-
-  return <Comp ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} />;
-});
-BreadcrumbLink.displayName = 'BreadcrumbLink';
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<'span'> & BreadcrumbPageBaseProps
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn('font-normal text-foreground', className)}
-    {...props}
-  />
-));
-BreadcrumbPage.displayName = 'BreadcrumbPage';
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'li'> & BreadcrumbSeparatorBaseProps) => (
-  <li role="presentation" aria-hidden="true" className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)} {...props}>
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
-
-const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'> & BreadcrumbEllipsisBaseProps) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn('flex h-9 w-9 items-center justify-center', className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
-
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-};
-export type { BreadcrumbBaseProps as BreadcrumbProps };

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

@@ -1,62 +0,0 @@
-import { Button } from '@gv-tech/ui-web';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-
-describe('Button', () => {
-  it('renders correctly', () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
-  });
-
-  it('handles click events', async () => {
-    const handleClick = vi.fn();
-    render(<Button onClick={handleClick}>Click me</Button>);
-
-    await userEvent.click(screen.getByRole('button', { name: /click me/i }));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('can be disabled', () => {
-    render(<Button disabled>Click me</Button>);
-    expect(screen.getByRole('button', { name: /click me/i })).toBeDisabled();
-  });
-
-  it('supports asChild prop', () => {
-    render(
-      <Button asChild>
-        <a href="/test">Link Button</a>
-      </Button>,
-    );
-
-    const link = screen.getByRole('link', { name: /link button/i });
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', '/test');
-  });
-
-  describe('Variants', () => {
-    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
-
-    variants.forEach((variant) => {
-      it(`renders ${variant} variant`, () => {
-        render(<Button variant={variant}>{variant}</Button>);
-        const button = screen.getByRole('button', { name: variant });
-        expect(button).toBeInTheDocument();
-        // We could check for specific classes here, but that might make tests too brittle
-        // checking the role and content presence is a good baseline
-      });
-    });
-  });
-
-  describe('Sizes', () => {
-    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
-
-    sizes.forEach((size) => {
-      it(`renders ${size} size`, () => {
-        render(<Button size={size}>{size}</Button>);
-        const button = screen.getByRole('button', { name: size });
-        expect(button).toBeInTheDocument();
-      });
-    });
-  });
-});

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

@@ -1,47 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import type { ButtonBaseProps } from '@gv-tech/ui-core';
-import { cn } from './lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants>, ButtonBaseProps {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  },
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };

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

@@ -1,23 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Calendar } from '.';
-
-describe('Calendar', () => {
-  it('renders correctly', () => {
-    // Mock date to consistent rendering
-    const date = new Date(2023, 0, 1); // Jan 1, 2023
-
-    render(<Calendar mode="single" selected={date} month={date} />);
-
-    expect(screen.getByText('January 2023')).toBeInTheDocument();
-    const days = screen.getAllByText('1');
-    expect(days.length).toBeGreaterThan(0);
-    expect(screen.getByText('Su')).toBeInTheDocument(); // Sunday header
-  });
-
-  it('renders with class name', () => {
-    const { container } = render(<Calendar className="test-class" />);
-    // DayPicker renders a div with the class
-    expect(container.firstChild).toHaveClass('test-class');
-  });
-});