@envive-ai/react-toolkit-v3 0.3.14 → 0.3.15-beta.0

package/src/components/Button/__tests__/Button.test.tsx

@@ -0,0 +1,116 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Button } from '../Button';
+
+describe('Button', () => {
+  it('should render with default variant and size', () => {
+    render(<Button>Click me</Button>);
+    const button = screen.getByRole('button', { name: 'Click me' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('envive-tw-bg-primary');
+    expect(button).toHaveClass('envive-tw-h-10');
+  });
+
+  it('should render children correctly', () => {
+    render(<Button>Hello World</Button>);
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should apply destructive variant', () => {
+    render(<Button variant="destructive">Delete</Button>);
+    const button = screen.getByRole('button', { name: 'Delete' });
+    expect(button).toHaveClass('envive-tw-bg-destructive');
+  });
+
+  it('should apply outline variant', () => {
+    render(<Button variant="outline">Outline</Button>);
+    const button = screen.getByRole('button', { name: 'Outline' });
+    expect(button).toHaveClass('envive-tw-border');
+    expect(button).toHaveClass('envive-tw-bg-background');
+  });
+
+  it('should apply secondary variant', () => {
+    render(<Button variant="secondary">Secondary</Button>);
+    const button = screen.getByRole('button', { name: 'Secondary' });
+    expect(button).toHaveClass('envive-tw-bg-secondary');
+  });
+
+  it('should apply ghost variant', () => {
+    render(<Button variant="ghost">Ghost</Button>);
+    const button = screen.getByRole('button', { name: 'Ghost' });
+    expect(button).not.toHaveClass('envive-tw-bg-primary');
+    expect(button).not.toHaveClass('envive-tw-border');
+  });
+
+  it('should apply link variant', () => {
+    render(<Button variant="link">Link</Button>);
+    const button = screen.getByRole('button', { name: 'Link' });
+    expect(button).toHaveClass('envive-tw-underline-offset-4');
+  });
+
+  it('should apply sm size', () => {
+    render(<Button size="sm">Small</Button>);
+    const button = screen.getByRole('button', { name: 'Small' });
+    expect(button).toHaveClass('envive-tw-h-9');
+    expect(button).toHaveClass('envive-tw-px-3');
+  });
+
+  it('should apply lg size', () => {
+    render(<Button size="lg">Large</Button>);
+    const button = screen.getByRole('button', { name: 'Large' });
+    expect(button).toHaveClass('envive-tw-h-11');
+    expect(button).toHaveClass('envive-tw-px-8');
+  });
+
+  it('should apply icon size', () => {
+    render(<Button size="icon">X</Button>);
+    const button = screen.getByRole('button', { name: 'X' });
+    expect(button).toHaveClass('envive-tw-h-10');
+    expect(button).toHaveClass('envive-tw-w-10');
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Ref Button</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('should render as child when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>,
+    );
+    const link = screen.getByRole('link', { name: 'Link Button' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('should be disabled when disabled prop is passed', () => {
+    render(<Button disabled>Disabled</Button>);
+    const button = screen.getByRole('button', { name: 'Disabled' });
+    expect(button).toBeDisabled();
+  });
+
+  it('should handle click events', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Clickable</Button>);
+    screen.getByRole('button', { name: 'Clickable' }).click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should merge custom className', () => {
+    render(<Button className="envive-tw-mt-4">Styled</Button>);
+    const button = screen.getByRole('button', { name: 'Styled' });
+    expect(button).toHaveClass('envive-tw-mt-4');
+  });
+
+  it('should have type button by default', () => {
+    render(<Button>Default Type</Button>);
+    const button = screen.getByRole('button', { name: 'Default Type' });
+    // HTML buttons default to type="submit" if not specified, but we pass no explicit type
+    expect(button.tagName).toBe('BUTTON');
+  });
+});

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './types';

package/src/components/Button/types/index.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { buttonVariants } from '../Button.js';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  /**
+   * When true, the component will render its child as the root element
+   * using Radix Slot, merging props and behavior.
+   */
+  asChild?: boolean;
+}

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { CalendarProps } from './types/index.js';
+
+const Calendar = (props: CalendarProps) => <>Calendar</>;
+
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

package/src/components/Calendar/__tests__/Calendar.test.tsx

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Calendar } from '../Calendar';
+
+describe('Calendar', () => {
+  it('should render the calendar', () => {
+    const { container } = render(<Calendar />);
+    expect(container.querySelector('.envive-tw-p-3')).toBeInTheDocument();
+  });
+
+  it('should render navigation buttons', () => {
+    const { container } = render(<Calendar />);
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('should render day grid', () => {
+    render(<Calendar />);
+    const grid = screen.getByRole('grid');
+    expect(grid).toBeInTheDocument();
+  });
+
+  it('should show outside days by default', () => {
+    const { container } = render(<Calendar />);
+    const outsideDays = container.querySelectorAll('.envive-tw-day-outside');
+    expect(outsideDays.length).toBeGreaterThanOrEqual(0);
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <Calendar className="envive-tw-w-full" />,
+    );
+    const calendar = container.firstChild as HTMLElement;
+    expect(calendar).toHaveClass('envive-tw-w-full');
+  });
+
+  it('should render month and year caption', () => {
+    render(<Calendar month={new Date(2024, 0, 1)} />);
+    expect(screen.getByText(/January 2024/i)).toBeInTheDocument();
+  });
+
+  it('should render weekday headers', () => {
+    const { container } = render(<Calendar />);
+    // react-day-picker v9 renders weekday headers as <th> elements within the grid
+    const weekdayHeaders = container.querySelectorAll('thead th');
+    expect(weekdayHeaders).toHaveLength(7);
+  });
+
+  it('should render chevron icons for navigation', () => {
+    const { container } = render(<Calendar />);
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('should support selected date', () => {
+    const selectedDate = new Date(2024, 0, 15);
+    const { container } = render(
+      <Calendar
+        mode="single"
+        selected={selectedDate}
+        month={selectedDate}
+      />,
+    );
+    const selectedDay = container.querySelector('[aria-selected="true"]');
+    expect(selectedDay).toBeInTheDocument();
+  });
+
+  it('should call onSelect when a day is clicked', async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <Calendar
+        mode="single"
+        onSelect={onSelect}
+        month={new Date(2024, 0, 1)}
+      />,
+    );
+    const day15 = screen.getByRole('gridcell', { name: '15' });
+    const button = day15.querySelector('button');
+    if (button) {
+      await user.click(button);
+      expect(onSelect).toHaveBeenCalled();
+    }
+  });
+
+  it('should support disabled dates', () => {
+    const { container } = render(
+      <Calendar
+        disabled
+        month={new Date(2024, 0, 1)}
+      />,
+    );
+    const disabledDays = container.querySelectorAll(
+      '.envive-tw-text-muted-foreground.envive-tw-opacity-50',
+    );
+    expect(disabledDays.length).toBeGreaterThanOrEqual(0);
+  });
+});

package/src/components/Calendar/index.ts

@@ -0,0 +1,2 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './types';

package/src/components/Calendar/types/index.ts

@@ -0,0 +1,3 @@
+import type { DayPickerProps } from 'react-day-picker';
+
+export type CalendarProps = DayPickerProps;

package/src/components/Card/Card.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import type {
+  CardProps,
+  CardHeaderProps,
+  CardFooterProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+} from './types/index.js';
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={classNames(
+        'envive-tw-rounded-lg envive-tw-border envive-tw-border-border envive-tw-bg-card envive-tw-text-card-foreground envive-tw-shadow-sm',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={classNames('envive-tw-flex envive-tw-flex-col envive-tw-space-y-1.5 envive-tw-p-6', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, children, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={classNames('envive-tw-text-2xl envive-tw-font-semibold envive-tw-leading-none envive-tw-tracking-tight', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
+  ({ className, children, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={classNames('envive-tw-text-sm envive-tw-text-muted-foreground', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  ),
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={classNames('envive-tw-p-6 envive-tw-pt-0', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={classNames('envive-tw-flex envive-tw-items-center envive-tw-p-6 envive-tw-pt-0', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/Card/__tests__/Card.test.tsx

@@ -0,0 +1,104 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '../Card';
+
+describe('Card', () => {
+  it('should render a card with all sub-components', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Content</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
+
+  it('should apply card styling', () => {
+    const { container } = render(<Card>Card content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass('envive-tw-rounded-lg');
+    expect(card).toHaveClass('envive-tw-border');
+    expect(card).toHaveClass('envive-tw-bg-card');
+    expect(card).toHaveClass('envive-tw-shadow-sm');
+  });
+
+  it('should forward ref on Card', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Card ref={ref}>Card</Card>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should forward ref on CardHeader', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<CardHeader ref={ref}>Header</CardHeader>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should forward ref on CardTitle', () => {
+    const ref = createRef<HTMLHeadingElement>();
+    render(<CardTitle ref={ref}>Title</CardTitle>);
+    expect(ref.current).toBeInstanceOf(HTMLHeadingElement);
+  });
+
+  it('should forward ref on CardContent', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<CardContent ref={ref}>Content</CardContent>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should forward ref on CardFooter', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<CardFooter ref={ref}>Footer</CardFooter>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should render CardTitle as h3', () => {
+    render(<CardTitle>Heading</CardTitle>);
+    const title = screen.getByText('Heading');
+    expect(title.tagName).toBe('H3');
+  });
+
+  it('should render CardDescription as p', () => {
+    render(<CardDescription>Desc</CardDescription>);
+    const desc = screen.getByText('Desc');
+    expect(desc.tagName).toBe('P');
+  });
+
+  it('should apply header padding', () => {
+    const { container } = render(<CardHeader>Header</CardHeader>);
+    const header = container.firstChild as HTMLElement;
+    expect(header).toHaveClass('envive-tw-p-6');
+  });
+
+  it('should apply content padding', () => {
+    const { container } = render(<CardContent>Content</CardContent>);
+    const content = container.firstChild as HTMLElement;
+    expect(content).toHaveClass('envive-tw-p-6');
+    expect(content).toHaveClass('envive-tw-pt-0');
+  });
+
+  it('should merge custom className on Card', () => {
+    const { container } = render(
+      <Card className="envive-tw-w-[350px]">Styled</Card>,
+    );
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass('envive-tw-w-[350px]');
+  });
+});

package/src/components/Card/index.ts

@@ -0,0 +1,16 @@
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './Card';
+export type {
+  CardProps,
+  CardHeaderProps,
+  CardFooterProps,
+  CardTitleProps,
+  CardDescriptionProps,
+  CardContentProps,
+} from './types';

package/src/components/Card/types/index.ts

@@ -0,0 +1,14 @@
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface CardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export interface CardDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+export interface CardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {}

package/src/components/ChatFooter/ChatFooter.tsx

@@ -16,6 +16,7 @@ export const ChatFooter = ({
   isScrolled,
   onChange,
   onSubmit,
+  onFocus,
   textFieldPlaceholderText,
   hideEnviveWatermark = false,
   disabled = false,
@@ -50,6 +51,7 @@ export const ChatFooter = ({
           theme={finalTheme}
           onChange={onChange}
           onSubmit={onSubmit}
+          onFocus={onFocus}
           className={classNames(textFieldClasses, className)}
           disabled={disabled || disabledInput}
         />

package/src/components/ChatFooter/components/PromptSuggestions.tsx

@@ -1,5 +1,10 @@
-import { PromptCarousel, PromptCarouselRows } from 'src/components/PromptCarousel';
+import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import { Theme } from 'tokens/theme/theme';
+import {
+  PromptCarousel,
+  PromptCarouselRows,
+  usePromptCarouselAnalytics,
+} from '../../PromptCarousel';
 
 export interface PromptSuggestionsProps {
   theme: Theme;
@@ -18,15 +23,26 @@ export const PromptSuggestions = ({
   style,
   disabled,
 }: PromptSuggestionsProps) => {
+  const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
+    usePromptCarouselAnalytics(WidgetInteractionComponent.FLOATING_CHAT, text => text);
+
   return (
     <PromptCarousel
       theme={theme}
       promptButtonTexts={suggestions}
-      handleButtonClick={handleButtonClick}
+      handleButtonClick={text => {
+        handleButtonClick(text);
+      }}
       promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
       className={className}
       isLoading={disabled}
       style={style}
+      handleButtonHover={onHover}
+      handleButtonDrag={onDrag}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
     />
   );
 };

package/src/components/ChatFooter/types/types.ts

@@ -47,6 +47,7 @@ export type ChatFooterProps = {
    * Function that runs when the text box text is submitted
    */
   onSubmit: (value: string) => void;
+  onFocus?: () => void;
   /**
    * The placeholder text that goes in the textbox before interaction
    */

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from '../../lib/utils.js';
+import type { CheckboxProps } from './types/index.js';
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'envive-tw-peer envive-tw-h-4 envive-tw-w-4 envive-tw-shrink-0 envive-tw-rounded-sm envive-tw-border envive-tw-border-primary envive-tw-ring-offset-background focus-visible:envive-tw-outline-none focus-visible:envive-tw-ring-2 focus-visible:envive-tw-ring-ring focus-visible:envive-tw-ring-offset-2 disabled:envive-tw-cursor-not-allowed disabled:envive-tw-opacity-50 data-[state=checked]:envive-tw-bg-primary data-[state=checked]:envive-tw-text-primary-foreground data-[state=indeterminate]:envive-tw-bg-primary data-[state=indeterminate]:envive-tw-text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className="envive-tw-flex envive-tw-items-center envive-tw-justify-center envive-tw-text-current"
+    >
+      {props.checked === 'indeterminate' ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M5 12h14" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -0,0 +1,75 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { Checkbox } from '../Checkbox';
+
+describe('Checkbox', () => {
+  it('should render correctly', () => {
+    render(<Checkbox aria-label="Accept terms" />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Accept terms' });
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it('should toggle checked state on click', async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox aria-label="Toggle" onCheckedChange={onCheckedChange} />,
+    );
+    const checkbox = screen.getByRole('checkbox', { name: 'Toggle' });
+    await user.click(checkbox);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should render as checked when checked prop is true', () => {
+    render(<Checkbox aria-label="Checked" checked={true} />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Checked' });
+    expect(checkbox).toHaveAttribute('data-state', 'checked');
+  });
+
+  it('should render as unchecked when checked prop is false', () => {
+    render(<Checkbox aria-label="Unchecked" checked={false} />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Unchecked' });
+    expect(checkbox).toHaveAttribute('data-state', 'unchecked');
+  });
+
+  it('should be disabled when disabled prop is passed', () => {
+    render(<Checkbox aria-label="Disabled" disabled />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Disabled' });
+    expect(checkbox).toBeDisabled();
+  });
+
+  it('should not toggle when disabled', async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox
+        aria-label="Disabled"
+        disabled
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+    const checkbox = screen.getByRole('checkbox', { name: 'Disabled' });
+    await user.click(checkbox);
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Checkbox ref={ref} aria-label="Ref" />);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('should merge custom className', () => {
+    render(<Checkbox aria-label="Custom" className="envive-tw-mt-4" />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Custom' });
+    expect(checkbox).toHaveClass('envive-tw-mt-4');
+  });
+
+  it('should have proper accessibility role', () => {
+    render(<Checkbox aria-label="Accessible" />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+});