diff --git a/package.json b/package.json
index d4880eb..2a15476 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.18.0",
-    "@vitest/coverage-v8": "^4.0.0-beta.8",
+    "@vitest/coverage-v8": "^3.2.4",
     "fs-extra": "^11.3.1",
     "jsdom": "^26.1.0",
     "lefthook": "^1.12.3",
@@ -33,6 +33,6 @@
     "tsx": "^4.20.5",
     "turbo": "^2.5.6",
     "typescript": "^5.9.2",
-    "vitest": "^4.0.0-beta.8"
+    "vitest": "^3.2.4"
   }
 }
diff --git a/packages/sqi-web/src/_util/__tests__/dom.test.ts b/packages/sqi-web/src/_util/__tests__/dom.test.ts
new file mode 100644
index 0000000..b6239b5
--- /dev/null
+++ b/packages/sqi-web/src/_util/__tests__/dom.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect, vi } from 'vitest';
+import { isDOM, getDOM, getRefDom, getReactNodeRef } from '../dom';
+import React from 'react';
+
+describe('dom utilities', () => {
+  describe('isDOM', () => {
+    it('should return true for HTMLElement', () => {
+      const div = document.createElement('div');
+      expect(isDOM(div)).toBe(true);
+    });
+
+    it('should return true for SVGElement', () => {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      expect(isDOM(svg)).toBe(true);
+    });
+
+    it('should return false for non-DOM objects', () => {
+      expect(isDOM(null)).toBe(false);
+      expect(isDOM(undefined)).toBe(false);
+      expect(isDOM({})).toBe(false);
+      expect(isDOM('string')).toBe(false);
+      expect(isDOM(123)).toBe(false);
+    });
+  });
+
+  describe('getDOM', () => {
+    it('should return currentElement for ref objects', () => {
+      const div = document.createElement('div');
+      const refObject = { currentElement: div };
+      expect(getDOM(refObject)).toBe(div);
+    });
+
+    it('should return the node itself if it is a DOM element', () => {
+      const div = document.createElement('div');
+      expect(getDOM(div)).toBe(div);
+    });
+
+    it('should return null for non-DOM objects', () => {
+      expect(getDOM(null)).toBe(null);
+      expect(getDOM(undefined)).toBe(null);
+      expect(getDOM({})).toBe(null);
+      expect(getDOM('string')).toBe(null);
+    });
+
+    it('should return null for objects without currentElement', () => {
+      const obj = { foo: 'bar' };
+      expect(getDOM(obj)).toBe(null);
+    });
+  });
+
+  describe('getRefDom', () => {
+    it('should return undefined for falsy input', () => {
+      expect(getRefDom(null as any)).toBeUndefined();
+      expect(getRefDom(undefined as any)).toBeUndefined();
+    });
+
+    it('should return currentElement.currentElement for special refs', () => {
+      const div = document.createElement('div');
+      const ref = { current: { currentElement: div } };
+      expect(getRefDom(ref)).toBe(div);
+    });
+
+    it('should return current property for regular refs', () => {
+      const div = document.createElement('div');
+      const ref = { current: div };
+      expect(getRefDom(ref)).toBe(div);
+    });
+
+    it('should return undefined when current is falsy', () => {
+      const ref = { current: null };
+      expect(getRefDom(ref)).toBeNull();
+    });
+  });
+
+  describe('getReactNodeRef', () => {
+    it('should return null for non-elements', () => {
+      expect(getReactNodeRef(null)).toBe(null);
+      expect(getReactNodeRef(undefined)).toBe(null);
+      expect(getReactNodeRef('string')).toBe(null);
+      expect(getReactNodeRef(123)).toBe(null);
+    });
+
+    it('should return ref based on React version', () => {
+      // Mock React version
+      const versionSpy = vi.spyOn(React, 'version', 'get');
+
+      // Test React 19+ behavior (ref in props)
+      versionSpy.mockReturnValue('19.0.0');
+      const divWithRefProp = React.createElement('div', { ref: 'test-ref' });
+      expect(getReactNodeRef(divWithRefProp)).toBe('test-ref');
+
+      // Test pre-React 19 behavior (ref as property)
+      versionSpy.mockReturnValue('18.2.0');
+      const divWithRefProperty = React.createElement('div', {});
+      expect(getReactNodeRef(divWithRefProperty)).toBeNull();
+
+      versionSpy.mockRestore();
+    });
+
+    it('should return null when element has no ref', () => {
+      const versionSpy = vi.spyOn(React, 'version', 'get');
+      versionSpy.mockReturnValue('19.0.0');
+
+      const divWithoutRef = React.createElement('div', {});
+      expect(getReactNodeRef(divWithoutRef)).toBe(null);
+
+      versionSpy.mockRestore();
+    });
+  });
+});
diff --git a/packages/sqi-web/src/_util/__tests__/ref.test.tsx b/packages/sqi-web/src/_util/__tests__/ref.test.tsx
new file mode 100644
index 0000000..4ff4925
--- /dev/null
+++ b/packages/sqi-web/src/_util/__tests__/ref.test.tsx
@@ -0,0 +1,203 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as React from 'react';
+import { composeRef, fillRef, useComposeRef, supportRef, supportNodeRef } from '../ref';
+import { render, renderHook } from '@testing-library/react';
+
+// 创建一个变量来保存模拟的React版本
+let mockReactVersion = '18.0.0';
+
+// 模拟react模块以允许控制version导出
+vi.mock('react', async () => {
+  const actualReact = await vi.importActual('react');
+  return {
+    ...actualReact,
+    get version() {
+      return mockReactVersion;
+    },
+  };
+});
+
+describe('ref utilities', () => {
+  beforeEach(() => {
+    mockReactVersion = '18.0.0';
+  });
+
+  describe('fillRef', () => {
+    it('should call function ref with node', () => {
+      const ref = vi.fn();
+      const node = document.createElement('div');
+      fillRef(ref, node);
+      expect(ref).toHaveBeenCalledWith(node);
+    });
+
+    it('should set current property of object ref', () => {
+      const ref = { current: null };
+      const node = document.createElement('div');
+      fillRef(ref, node);
+      expect(ref.current).toBe(node);
+    });
+
+    it('should not throw error for null ref', () => {
+      expect(() => fillRef(null, document.createElement('div'))).not.toThrow();
+    });
+  });
+
+  describe('composeRef', () => {
+    it('should return undefined when no refs provided', () => {
+      expect(composeRef()).toBeUndefined();
+    });
+
+    it('should return the only ref when one ref provided', () => {
+      const ref = vi.fn();
+      expect(composeRef(ref)).toBe(ref);
+    });
+
+    it('should compose multiple function refs', () => {
+      const ref1 = vi.fn();
+      const ref2 = vi.fn();
+      const node = document.createElement('div');
+
+      const composedRef = composeRef(ref1, ref2);
+      (composedRef as React.RefCallback<HTMLDivElement>)(node);
+
+      expect(ref1).toHaveBeenCalledWith(node);
+      expect(ref2).toHaveBeenCalledWith(node);
+    });
+
+    it('should compose multiple object refs', () => {
+      const ref1 = React.createRef<HTMLDivElement>();
+      const ref2 = React.createRef<HTMLDivElement>();
+      const node = document.createElement('div');
+
+      const composedRef = composeRef(ref1, ref2);
+      (composedRef as React.RefCallback<HTMLDivElement>)(node);
+
+      expect(ref1.current).toBe(node);
+      expect(ref2.current).toBe(node);
+    });
+
+    it('should compose mixed refs', () => {
+      const ref1 = vi.fn();
+      const ref2 = React.createRef<HTMLDivElement>();
+      const node = document.createElement('div');
+
+      const composedRef = composeRef(ref1, ref2);
+      (composedRef as React.RefCallback<HTMLDivElement>)(node);
+
+      expect(ref1).toHaveBeenCalledWith(node);
+      expect(ref2.current).toBe(node);
+    });
+  });
+
+  describe('useComposeRef', () => {
+    it('should compose refs with hook', () => {
+      const ref1 = vi.fn();
+      const ref2 = React.createRef<HTMLDivElement>();
+
+      const TestComponent = () => {
+        const composedRef = useComposeRef(ref1, ref2);
+        return (
+          <div ref={composedRef} data-testid="test">
+            Test
+          </div>
+        );
+      };
+
+      const { getByTestId } = render(<TestComponent />);
+
+      expect(ref1).toHaveBeenCalledWith(getByTestId('test'));
+      expect(ref2.current).toBe(getByTestId('test'));
+    });
+
+    it('should return same ref when refs are not changed', () => {
+      const ref1 = vi.fn();
+      const { result, rerender } = renderHook(({ ref1 }) => useComposeRef(ref1), { initialProps: { ref1 } });
+      const firstRef = result.current;
+
+      rerender({ ref1 });
+      expect(result.current).toBe(firstRef);
+    });
+
+    it('should return new ref when refs changed', () => {
+      const ref1 = vi.fn();
+      const ref2 = vi.fn();
+      const { result, rerender } = renderHook(({ refs }) => useComposeRef(...refs), { initialProps: { refs: [ref1] } });
+      const firstRef = result.current;
+
+      rerender({ refs: [ref1, ref2] });
+      expect(result.current).not.toBe(firstRef);
+    });
+  });
+
+  describe('supportRef', () => {
+    it('should return false for falsy values', () => {
+      expect(supportRef(null)).toBe(false);
+      expect(supportRef(undefined)).toBe(false);
+    });
+
+    it('should return true for React 19+ elements', () => {
+      mockReactVersion = '19.0.0';
+
+      const element = React.createElement('div');
+      expect(supportRef(element)).toBe(true);
+    });
+
+    it('should return false for React 19+ function components without forwardRef', () => {
+      mockReactVersion = '19.0.0';
+
+      const FunctionComponent = () => <div />;
+      expect(supportRef(FunctionComponent)).toBe(false);
+    });
+
+    it('should return true for forwardRef components', () => {
+      const ForwardRefComponent = React.forwardRef(() => <div />);
+      expect(supportRef(ForwardRefComponent)).toBe(true);
+    });
+
+    it('should return true for class components', () => {
+      class ClassComponent extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      expect(supportRef(ClassComponent)).toBe(true);
+    });
+
+    it('should return false for function components without forwardRef in React 18', () => {
+      mockReactVersion = '18.0.0';
+
+      const FunctionComponent = () => <div />;
+      expect(supportRef(FunctionComponent)).toBe(false);
+    });
+
+    it('should handle memo components', () => {
+      const FunctionComponent = () => <div />;
+      const MemoComponent = React.memo(FunctionComponent);
+      expect(supportRef(MemoComponent)).toBe(false);
+    });
+  });
+
+  describe('supportNodeRef', () => {
+    it('should return false for non-elements', () => {
+      expect(supportNodeRef(null)).toBe(false);
+      expect(supportNodeRef('string')).toBe(false);
+      expect(supportNodeRef(123)).toBe(false);
+    });
+
+    it('should return true for elements that support ref in React 19+', () => {
+      mockReactVersion = '19.0.0';
+
+      const element = React.createElement('div');
+      expect(supportNodeRef(element)).toBe(true);
+    });
+
+    it('should return false for elements that do not support ref', () => {
+      mockReactVersion = '18.0.0';
+
+      const FunctionComponent = () => <div />;
+      const element = React.createElement(FunctionComponent);
+
+      expect(supportNodeRef(element)).toBe(false);
+    });
+  });
+});
diff --git a/packages/sqi-web/src/_util/__tests__/reposeive.test.ts b/packages/sqi-web/src/_util/__tests__/reposeive.test.ts
new file mode 100644
index 0000000..7000d6c
--- /dev/null
+++ b/packages/sqi-web/src/_util/__tests__/reposeive.test.ts
@@ -0,0 +1,187 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import responsiveObserve, { responsiveArray, responsiveMap } from '../responsiveObserve';
+
+type Fn = (...args: any[]) => any;
+
+describe('responsiveObserve', () => {
+  // 保存原始的matchMedia
+  const originalMatchMedia = window.matchMedia;
+
+  beforeEach(() => {
+    responsiveObserve.handlers = {};
+
+    window.matchMedia = vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  describe('responsiveArray', () => {
+    it('should be defined', () => {
+      expect(responsiveArray).toEqual(['xxl', 'xl', 'lg', 'md', 'sm', 'xs']);
+    });
+  });
+
+  describe('responsiveMap', () => {
+    it('should be defined with correct breakpoints', () => {
+      expect(responsiveMap).toEqual({
+        xs: '(max-width: 575px)',
+        sm: '(min-width: 576px)',
+        md: '(min-width: 768px)',
+        lg: '(min-width: 992px)',
+        xl: '(min-width: 1200px)',
+        xxl: '(min-width: 1600px)',
+      });
+    });
+  });
+
+  describe('subscribe and unsubscribe', () => {
+    it('should subscribe and unsubscribe correctly', () => {
+      const callback = vi.fn();
+
+      // 订阅
+      const token = responsiveObserve.subscribe(callback);
+      expect(typeof token).toBe('number');
+      expect(callback).toHaveBeenCalled();
+
+      // 取消订阅
+      responsiveObserve.unsubscribe(token);
+      // 验证回调函数被调用次数
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call all subscribers when dispatch is called', () => {
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+
+      const token1 = responsiveObserve.subscribe(callback1);
+      const token2 = responsiveObserve.subscribe(callback2);
+
+      // 模拟屏幕变化
+      const screens = { xs: true, sm: false };
+      responsiveObserve.dispatch(screens);
+
+      expect(callback1).toHaveBeenCalledWith(screens);
+      expect(callback2).toHaveBeenCalledWith(screens);
+
+      // 清理
+      responsiveObserve.unsubscribe(token1);
+      responsiveObserve.unsubscribe(token2);
+    });
+  });
+
+  describe('register and unregister', () => {
+    it('should register media queries on first subscription', () => {
+      const mockMql = {
+        matches: false,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      };
+
+      // 模拟matchMedia返回自定义对象
+      window.matchMedia = vi.fn().mockReturnValue(mockMql);
+
+      const callback = vi.fn();
+      responsiveObserve.subscribe(callback);
+
+      // 验证为每个断点都注册了媒体查询监听器
+      expect(window.matchMedia).toHaveBeenCalledTimes(Object.keys(responsiveMap).length);
+      expect(mockMql.addListener).toHaveBeenCalledTimes(Object.keys(responsiveMap).length);
+    });
+
+    it('should unregister media queries when no subscribers left', () => {
+      const mockMqls: any[] = [];
+
+      window.matchMedia = vi.fn().mockImplementation((query) => {
+        const mockMql = {
+          matches: false,
+          media: query,
+          addListener: vi.fn(),
+          removeListener: vi.fn(),
+        };
+        mockMqls.push(mockMql);
+        return mockMql;
+      });
+
+      const callback = vi.fn();
+      const token = responsiveObserve.subscribe(callback);
+
+      // 确保监听器已添加
+      mockMqls.forEach((mql) => {
+        expect(mql.addListener).toHaveBeenCalled();
+      });
+
+      // 取消订阅，应该触发unregister
+      responsiveObserve.unsubscribe(token);
+
+      // 验证监听器已被移除
+      mockMqls.forEach((mql) => {
+        expect(mql.removeListener).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('media query handling', () => {
+    it('should update screens when media query matches change', () => {
+      const listeners: Fn[] = [];
+      const mqlMocks: any[] = [];
+
+      // 创建更真实的matchMedia模拟
+      window.matchMedia = vi.fn().mockImplementation((query) => {
+        const mqlMock = {
+          matches: false,
+          media: query,
+          addListener: vi.fn((listener: Fn) => {
+            listeners.push(listener);
+          }),
+          removeListener: vi.fn(),
+        };
+        mqlMocks.push(mqlMock);
+        return mqlMock;
+      });
+
+      const callback = vi.fn();
+      responsiveObserve.subscribe(callback);
+
+      // 模拟媒体查询变化
+      if (listeners[0]) {
+        listeners[0]({ matches: true });
+      }
+
+      // 验证回调被调用
+      expect(callback).toHaveBeenCalled();
+    });
+  });
+
+  describe('dispatch', () => {
+    it('should update screens and notify subscribers', () => {
+      const callback = vi.fn();
+      responsiveObserve.subscribe(callback);
+
+      const screens = { xs: true, sm: false, md: false, lg: false, xl: false, xxl: false };
+      const result = responsiveObserve.dispatch(screens);
+
+      expect(result).toBe(true); // 因为有订阅者
+      expect(callback).toHaveBeenCalledWith(screens);
+    });
+
+    it('should return false when no subscribers', () => {
+      responsiveObserve.unregister();
+
+      const screens = { xs: true };
+      const result = responsiveObserve.dispatch(screens);
+
+      expect(result).toBe(false);
+    });
+  });
+});
diff --git a/packages/sqi-web/src/_util/__tests__/toArray.test.ts b/packages/sqi-web/src/_util/__tests__/toArray.test.ts
new file mode 100644
index 0000000..8ed1a57
--- /dev/null
+++ b/packages/sqi-web/src/_util/__tests__/toArray.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest';
+import { toArray } from '../toArray';
+import * as React from 'react';
+
+describe('toArray', () => {
+  it('should convert null or undefined to empty array', () => {
+    expect(toArray(null)).toEqual([]);
+    expect(toArray(undefined)).toEqual([]);
+  });
+
+  it('should convert string to array with single string element', () => {
+    expect(toArray('hello')).toEqual(['hello']);
+  });
+
+  it('should convert number to array with single number element', () => {
+    expect(toArray(42)).toEqual([42]);
+  });
+
+  it('should convert single React element to array with that element', () => {
+    const element = React.createElement('div', null, 'Hello');
+    const result = toArray(element);
+    expect(result).toHaveLength(1);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+    expect((result[0] as any).props.children).toBe('Hello');
+  });
+
+  it('should flatten arrays', () => {
+    const element1 = React.createElement('div', null, 'First');
+    const element2 = React.createElement('span', null, 'Second');
+    const result = toArray([element1, element2]);
+    expect(result).toHaveLength(2);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+    expect((result[1] as React.ReactElement).type).toBe('span');
+    expect((result[0] as any).props.children).toBe('First');
+    expect((result[1] as any).props.children).toBe('Second');
+  });
+
+  it('should filter out null and undefined values from arrays', () => {
+    const element = React.createElement('div', null, 'Hello');
+    const result = toArray([element, null, undefined, 'text']);
+    expect(result).toHaveLength(2);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+    expect((result[0] as any).props.children).toBe('Hello');
+    expect(result[1]).toBe('text');
+  });
+
+  it('should recursively flatten nested arrays', () => {
+    const element1 = React.createElement('div', null, 'First');
+    const element2 = React.createElement('span', null, 'Second');
+    const element3 = React.createElement('p', null, 'Third');
+    const nestedArray = [element1, [element2, [element3]]];
+    const result = toArray(nestedArray);
+    expect(result).toHaveLength(3);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+    expect((result[1] as React.ReactElement).type).toBe('span');
+    expect((result[2] as React.ReactElement).type).toBe('p');
+    expect((result[0] as any).props.children).toBe('First');
+    expect((result[1] as any).props.children).toBe('Second');
+    expect((result[2] as any).props.children).toBe('Third');
+  });
+
+  it('should unwrap Fragment children', () => {
+    const fragment = React.createElement(
+      React.Fragment,
+      null,
+      React.createElement('div', null, 'Child 1'),
+      React.createElement('span', null, 'Child 2'),
+    );
+
+    const result = toArray(fragment);
+    expect(result).toHaveLength(2);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+    expect((result[1] as React.ReactElement).type).toBe('span');
+  });
+
+  it('should unwrap nested Fragment children', () => {
+    const nestedFragment = React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(React.Fragment, null, React.createElement('div', null, 'Deep child')),
+    );
+
+    const result = toArray(nestedFragment);
+    expect(result).toHaveLength(1);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+  });
+
+  it('should handle Fragment with no children', () => {
+    const emptyFragment = React.createElement(React.Fragment, null);
+    const result = toArray(emptyFragment);
+    expect(result).toEqual([]);
+  });
+
+  it('should handle Fragment with null/undefined children', () => {
+    const fragmentWithNulls = React.createElement(React.Fragment, null, null, undefined, 'text');
+
+    const result = toArray(fragmentWithNulls);
+    expect(result).toEqual(['text']);
+  });
+
+  it('should handle mixed content with Fragments', () => {
+    const element = React.createElement('div', null, 'Regular element');
+    const fragment = React.createElement(React.Fragment, null, React.createElement('span', null, 'Fragment child'));
+
+    const result = toArray([element, fragment, 'text']);
+    expect(result).toHaveLength(3);
+    expect((result[0] as React.ReactElement).type).toBe('div');
+    expect((result[1] as React.ReactElement).type).toBe('span');
+    expect(result[2]).toBe('text');
+  });
+
+  it('should handle complex nested structure', () => {
+    const complexStructure = [
+      'text',
+      null,
+      React.createElement('div', null, 'Element'),
+      [
+        React.createElement(React.Fragment, null, React.createElement('span', null, 'Fragment child'), null),
+        'nested text',
+      ],
+    ];
+
+    const result = toArray(complexStructure);
+    expect(result).toHaveLength(4);
+    expect(result[0]).toBe('text');
+    expect((result[1] as React.ReactElement).type).toBe('div');
+    expect((result[2] as React.ReactElement).type).toBe('span');
+    expect(result[3]).toBe('nested text');
+  });
+});
diff --git a/packages/sqi-web/src/alert/__tests__/__snapshots__/alert.test.tsx.snap b/packages/sqi-web/src/alert/__tests__/__snapshots__/alert.test.tsx.snap
new file mode 100644
index 0000000..400e4d3
--- /dev/null
+++ b/packages/sqi-web/src/alert/__tests__/__snapshots__/alert.test.tsx.snap
@@ -0,0 +1,310 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Alert > should display icons correctly 1`] = `
+<div
+  class="sqi-alert sqi-alert-success sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="check-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM7.49985 10.5858L10.4999 13.5858L16.4999 7.58578L17.9141 8.99999L10.4999 16.4142L6.08564 12L7.49985 10.5858Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      Success message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should display icons correctly 2`] = `
+<div
+  class="sqi-alert sqi-alert-info sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      No icon message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should render basic Alert correctly 1`] = `
+<div
+  class="sqi-alert sqi-alert-info sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="info-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM10.996 8.50002V6.49611H12.9999V8.50002H10.996ZM12.9999 10L12.9999 17.5H10.9999V10L12.9999 10Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      This is an alert message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should render different types of Alert correctly 1`] = `
+<div
+  class="sqi-alert sqi-alert-success sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="check-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM7.49985 10.5858L10.4999 13.5858L16.4999 7.58578L17.9141 8.99999L10.4999 16.4142L6.08564 12L7.49985 10.5858Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      Success message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should render different types of Alert correctly 2`] = `
+<div
+  class="sqi-alert sqi-alert-info sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="info-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM10.996 8.50002V6.49611H12.9999V8.50002H10.996ZM12.9999 10L12.9999 17.5H10.9999V10L12.9999 10Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      Info message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should render different types of Alert correctly 3`] = `
+<div
+  class="sqi-alert sqi-alert-warning sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="warn-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM11.0001 14H13.0001V6.49998H11.0001V14ZM13.004 15.5H11.0001V17.5039H13.004V15.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      Warning message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should render different types of Alert correctly 4`] = `
+<div
+  class="sqi-alert sqi-alert-error sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="close-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM8.81753 7.40346L11.9999 10.5858L15.1815 7.40414L16.5957 8.81835L13.4141 12L16.5957 15.1816L15.1815 16.5958L11.9999 13.4142L8.81753 16.5965L7.40332 15.1823L10.5856 12L7.40332 8.81767L8.81753 7.40346Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-description"
+    >
+      Error message
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Alert > should render title and description correctly 1`] = `
+<div
+  class="sqi-alert sqi-alert-info sqi-alert-motion sqi-alert-motion-entered"
+  role="alert"
+>
+  <div
+    class="sqi-alert-icon"
+  >
+    <span
+      aria-label="info-circle-filled"
+      class="sqi-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM10.996 8.50002V6.49611H12.9999V8.50002H10.996ZM12.9999 10L12.9999 17.5H10.9999V10L12.9999 10Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-alert-content"
+  >
+    <div
+      class="sqi-alert-title"
+    >
+      Alert Title
+    </div>
+    <div
+      class="sqi-alert-description"
+    >
+      Alert Description
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/sqi-web/src/alert/__tests__/alert.test.tsx b/packages/sqi-web/src/alert/__tests__/alert.test.tsx
new file mode 100644
index 0000000..6d7ef8f
--- /dev/null
+++ b/packages/sqi-web/src/alert/__tests__/alert.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import Alert from '../Alert';
+
+describe('Alert', () => {
+  it('should render basic Alert correctly', () => {
+    const { container, getByText } = render(<Alert description="This is an alert message" />);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveClass('sqi-alert');
+    expect(getByText('This is an alert message')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render different types of Alert correctly', () => {
+    const { container: successAlert } = render(<Alert type="success" description="Success message" />);
+    expect(successAlert.firstChild).toHaveClass('sqi-alert-success');
+
+    const { container: infoAlert } = render(<Alert type="info" description="Info message" />);
+    expect(infoAlert.firstChild).toHaveClass('sqi-alert-info');
+
+    const { container: warningAlert } = render(<Alert type="warning" description="Warning message" />);
+    expect(warningAlert.firstChild).toHaveClass('sqi-alert-warning');
+
+    const { container: errorAlert } = render(<Alert type="error" description="Error message" />);
+    expect(errorAlert.firstChild).toHaveClass('sqi-alert-error');
+
+    expect(successAlert.firstChild).toMatchSnapshot();
+    expect(infoAlert.firstChild).toMatchSnapshot();
+    expect(warningAlert.firstChild).toMatchSnapshot();
+    expect(errorAlert.firstChild).toMatchSnapshot();
+  });
+
+  it('should render title and description correctly', () => {
+    const { container, getByText } = render(<Alert title="Alert Title" description="Alert Description" />);
+    expect(getByText('Alert Title')).toBeInTheDocument();
+    expect(getByText('Alert Description')).toBeInTheDocument();
+    expect(getByText('Alert Title')).toHaveClass('sqi-alert-title');
+    expect(getByText('Alert Description')).toHaveClass('sqi-alert-description');
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should display icons correctly', () => {
+    const { container: hasIconAlert } = render(<Alert type="success" description="Success message" />);
+
+    // Check default icon display
+    expect(hasIconAlert.firstChild).toHaveClass('sqi-alert');
+    expect(hasIconAlert.firstChild?.firstChild).toHaveClass('sqi-alert-icon');
+
+    // Check when icon is hidden
+    const { container: noIconAlert } = render(<Alert showIcon={false} description="No icon message" />);
+    expect(noIconAlert.firstChild?.firstChild).not.toHaveClass('sqi-alert-icon');
+
+    expect(hasIconAlert.firstChild).toMatchSnapshot();
+    expect(noIconAlert.firstChild).toMatchSnapshot();
+  });
+
+  it('should render custom icons correctly', () => {
+    const { container, getByTestId } = render(
+      <Alert icon={<span data-testid="custom-icon">Custom Icon</span>} description="Custom icon alert" />,
+    );
+    expect(getByTestId('custom-icon')).toBeInTheDocument();
+
+    expect(container.firstChild?.firstChild).toHaveClass('sqi-alert-icon');
+  });
+
+  it('should render action area correctly', () => {
+    const action = (
+      <button type="button" data-testid="alert-action">
+        Action Button
+      </button>
+    );
+    const { container } = render(<Alert action={action} description="Alert with action" />);
+    expect(screen.getByTestId('alert-action')).toBeInTheDocument();
+    expect((container.firstChild as any)?.children[2]).toHaveClass('sqi-alert-action');
+  });
+
+  it('should render close button correctly', () => {
+    const { container } = render(<Alert closable description="Closable alert" />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(container.firstChild?.lastChild).toHaveClass('sqi-alert-close');
+  });
+
+  it('should hide after clicking close button', async () => {
+    const { container } = render(<Alert closable description="Closable alert" />);
+
+    expect(container.firstChild).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button'));
+
+    await waitFor(
+      () => {
+        expect(container.firstChild).not.toBeInTheDocument();
+      },
+      { timeout: 500 },
+    );
+  });
+
+  it('should trigger onClose callback when closing', () => {
+    const onClose = vi.fn();
+    render(<Alert closable onClose={onClose} description="Alert with close callback" />);
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/sqi-web/src/checkbox/__tests__/__snapshots__/checkbox-group.test.tsx.snap b/packages/sqi-web/src/checkbox/__tests__/__snapshots__/checkbox-group.test.tsx.snap
new file mode 100644
index 0000000..9a1f64c
--- /dev/null
+++ b/packages/sqi-web/src/checkbox/__tests__/__snapshots__/checkbox-group.test.tsx.snap
@@ -0,0 +1,103 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CheckboxGroup Component > should render correctly with children 1`] = `
+<div
+  class="sqi-checkbox-group"
+>
+  <label
+    class="sqi-checkbox-wrapper"
+  >
+    <span
+      class="sqi-checkbox"
+    >
+      <input
+        class="sqi-checkbox-input"
+        name="«r0»"
+        type="checkbox"
+        value="1"
+      />
+      <span
+        class="sqi-checkbox-inner"
+      />
+    </span>
+    <span
+      class="sqi-checkbox-label"
+    >
+      Option 1
+    </span>
+  </label>
+  <label
+    class="sqi-checkbox-wrapper"
+  >
+    <span
+      class="sqi-checkbox"
+    >
+      <input
+        class="sqi-checkbox-input"
+        name="«r0»"
+        type="checkbox"
+        value="2"
+      />
+      <span
+        class="sqi-checkbox-inner"
+      />
+    </span>
+    <span
+      class="sqi-checkbox-label"
+    >
+      Option 2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`CheckboxGroup Component > should support options prop 1`] = `
+<div
+  class="sqi-checkbox-group"
+>
+  <label
+    class="sqi-checkbox-wrapper"
+  >
+    <span
+      class="sqi-checkbox"
+    >
+      <input
+        class="sqi-checkbox-input"
+        name="«r4»"
+        type="checkbox"
+        value="1"
+      />
+      <span
+        class="sqi-checkbox-inner"
+      />
+    </span>
+    <span
+      class="sqi-checkbox-label"
+    >
+      Option 1
+    </span>
+  </label>
+  <label
+    class="sqi-checkbox-wrapper"
+  >
+    <span
+      class="sqi-checkbox"
+    >
+      <input
+        class="sqi-checkbox-input"
+        name="«r4»"
+        type="checkbox"
+        value="2"
+      />
+      <span
+        class="sqi-checkbox-inner"
+      />
+    </span>
+    <span
+      class="sqi-checkbox-label"
+    >
+      Option 2
+    </span>
+  </label>
+</div>
+`;
diff --git a/packages/sqi-web/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap b/packages/sqi-web/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
new file mode 100644
index 0000000..82882af
--- /dev/null
+++ b/packages/sqi-web/src/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Checkbox > should render correctly 1`] = `
+<label
+  class="sqi-checkbox-wrapper"
+>
+  <span
+    class="sqi-checkbox"
+  >
+    <input
+      class="sqi-checkbox-input"
+      type="checkbox"
+    />
+    <span
+      class="sqi-checkbox-inner"
+    />
+  </span>
+  <span
+    class="sqi-checkbox-label"
+  >
+    Checkbox
+  </span>
+</label>
+`;
diff --git a/packages/sqi-web/src/checkbox/__tests__/checkbox-group.test.tsx b/packages/sqi-web/src/checkbox/__tests__/checkbox-group.test.tsx
new file mode 100644
index 0000000..abca26d
--- /dev/null
+++ b/packages/sqi-web/src/checkbox/__tests__/checkbox-group.test.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import CheckboxGroup from '../CheckboxGroup';
+import Checkbox from '../Checkbox';
+
+describe('CheckboxGroup Component', () => {
+  it('should render correctly with children', () => {
+    const { container, getByText } = render(
+      <CheckboxGroup>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+    expect(getByText('Option 1')).toBeInTheDocument();
+    expect(getByText('Option 2')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support defaultValue', () => {
+    const { container } = render(
+      <CheckboxGroup defaultValue={['1']}>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs[0]).toBeChecked();
+    expect(inputs[1]).not.toBeChecked();
+  });
+
+  it('should support value (controlled mode)', () => {
+    const { container } = render(
+      <CheckboxGroup value={['1']}>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs[0]).toBeChecked();
+    expect(inputs[1]).not.toBeChecked();
+  });
+
+  it('should trigger onChange when checkbox is clicked', () => {
+    const onChange = vi.fn();
+    const { getByText } = render(
+      <CheckboxGroup onChange={onChange}>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    // Click first checkbox
+    fireEvent.click(getByText('Option 1'));
+    expect(onChange).toHaveBeenCalledWith(['1']);
+
+    // Click second checkbox
+    fireEvent.click(getByText('Option 2'));
+    expect(onChange).toHaveBeenCalledWith(['1', '2']);
+  });
+
+  it('should support options prop', () => {
+    const { container, getByText } = render(
+      <CheckboxGroup
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+      />,
+    );
+
+    expect(getByText('Option 1')).toBeInTheDocument();
+    expect(getByText('Option 2')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support string and number array for options prop', () => {
+    const { container, getByText } = render(<CheckboxGroup options={['Apple', 'Banana', 123]} />);
+
+    expect(getByText('Apple')).toBeInTheDocument();
+    expect(getByText('Banana')).toBeInTheDocument();
+    expect(getByText('123')).toBeInTheDocument();
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs).toHaveLength(3);
+  });
+
+  it('should support disabled state', () => {
+    const { container } = render(
+      <CheckboxGroup disabled>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs[0]).toBeDisabled();
+    expect(inputs[1]).toBeDisabled();
+  });
+
+  it('should support custom className and style', () => {
+    const { container } = render(
+      <CheckboxGroup className="custom-group" style={{ backgroundColor: 'red' }}>
+        <Checkbox value="1">Option 1</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    expect(container.firstChild).toHaveClass('custom-group');
+    // expect(container.firstChild).toHaveStyle('background-color: red');
+    expect((container.firstChild as HTMLInputElement)?.getAttribute('style')).toContain('background-color: red');
+  });
+
+  it('should work with renderOption', () => {
+    const { getByTestId } = render(
+      <CheckboxGroup
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+        renderOption={(option) => <span data-testid={`custom-${option.value}`}>Custom {option.label}</span>}
+      />,
+    );
+
+    expect(getByTestId('custom-1')).toBeInTheDocument();
+    expect(getByTestId('custom-2')).toBeInTheDocument();
+  });
+
+  it('should handle checkbox toggle correctly', () => {
+    const onChange = vi.fn();
+    const { getByText } = render(
+      <CheckboxGroup value={['1']} onChange={onChange}>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    // Uncheck first checkbox
+    fireEvent.click(getByText('Option 1'));
+    expect(onChange).toHaveBeenCalledWith([]);
+
+    // Check second checkbox
+    fireEvent.click(getByText('Option 2'));
+    expect(onChange).toHaveBeenCalledWith(['1', '2']);
+  });
+
+  it('should support name attribute', () => {
+    const { container } = render(
+      <CheckboxGroup name="test-group">
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs[0]).toHaveAttribute('name', 'test-group');
+    expect(inputs[1]).toHaveAttribute('name', 'test-group');
+  });
+});
diff --git a/packages/sqi-web/src/checkbox/__tests__/checkbox.test.tsx b/packages/sqi-web/src/checkbox/__tests__/checkbox.test.tsx
new file mode 100644
index 0000000..89aa640
--- /dev/null
+++ b/packages/sqi-web/src/checkbox/__tests__/checkbox.test.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import Checkbox from '../Checkbox';
+import CheckboxGroup from '../CheckboxGroup';
+
+describe('Checkbox', () => {
+  it('should render correctly', () => {
+    const { container, getByText } = render(<Checkbox>Checkbox</Checkbox>);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(getByText('Checkbox')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support defaultChecked', () => {
+    const { container } = render(<Checkbox defaultChecked>Checkbox</Checkbox>);
+    expect(container.querySelector('input')).toBeChecked();
+  });
+
+  it('should support checked', () => {
+    const { container } = render(<Checkbox checked>Checkbox</Checkbox>);
+    expect(container.querySelector('input')).toBeChecked();
+  });
+
+  it('should trigger onChange when clicked', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox onChange={onChange}>Checkbox</Checkbox>);
+
+    const input = getByRole('checkbox');
+    fireEvent.click(input);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          checked: true,
+        }),
+      }),
+    );
+  });
+
+  it('should support disabled state', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <Checkbox disabled onChange={onChange}>
+        Checkbox
+      </Checkbox>,
+    );
+
+    const input = getByRole('checkbox');
+    expect(input).toBeDisabled();
+
+    fireEvent.click(input);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should support indeterminate state', () => {
+    const { container } = render(<Checkbox indeterminate>Checkbox</Checkbox>);
+    expect(container.firstChild?.firstChild).toHaveClass('sqi-checkbox-indeterminate');
+  });
+
+  it('should work with CheckboxGroup', () => {
+    const onChange = vi.fn();
+    const { container, getByText } = render(
+      <CheckboxGroup onChange={onChange} defaultValue={['1']}>
+        <Checkbox value="1">Option 1</Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    expect(container.querySelectorAll('input')[0]).toBeChecked();
+    expect(container.querySelectorAll('input')[1]).not.toBeChecked();
+
+    // Click second checkbox
+    fireEvent.click(getByText('Option 2'));
+    expect(onChange).toHaveBeenCalledWith(['1', '2']);
+  });
+
+  it('should respect Checkbox disabled over CheckboxGroup disabled', () => {
+    const { container } = render(
+      <CheckboxGroup disabled>
+        <Checkbox disabled={false} value="1">
+          Option 1
+        </Checkbox>
+        <Checkbox value="2">Option 2</Checkbox>
+      </CheckboxGroup>,
+    );
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs[0]).not.toBeDisabled(); // Explicitly enabled
+    expect(inputs[1]).toBeDisabled(); // Inherited from group
+  });
+
+  it('should support custom className and style', () => {
+    const { container } = render(
+      <Checkbox className="custom-class" style={{ color: 'red' }}>
+        Checkbox
+      </Checkbox>,
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+    // expect(container.firstChild).toHaveStyle('color: red');
+    expect((container.firstChild?.firstChild as HTMLInputElement)?.getAttribute('style')).toContain('color: red');
+  });
+});
diff --git a/packages/sqi-web/src/checkbox/type.ts b/packages/sqi-web/src/checkbox/type.ts
index c6cac4c..47000b7 100644
--- a/packages/sqi-web/src/checkbox/type.ts
+++ b/packages/sqi-web/src/checkbox/type.ts
@@ -32,7 +32,7 @@ export interface CheckboxGroupProps {
   /**
    * @description 配置形式设置子元素
    */
-  options?: CheckboxOptions[] | string[] | number[];
+  options?: CheckboxOptions[] | string[] | number[] | (string | number)[];
   /**
    * @description 自定义渲染内容, 仅使用 options 时生效
    */
diff --git a/packages/sqi-web/src/config-provider/ConfigProvider.tsx b/packages/sqi-web/src/config-provider/ConfigProvider.tsx
index bba1f29..72e0cd3 100644
--- a/packages/sqi-web/src/config-provider/ConfigProvider.tsx
+++ b/packages/sqi-web/src/config-provider/ConfigProvider.tsx
@@ -9,7 +9,7 @@ import type { ConfigProviderProps } from './type';
 export default function ConfigProvider(baseProps: ConfigProviderProps) {
   const props = useMergeProps(baseProps, defaultConfigProps);
   const { iconPrefix, children } = props;
-  const providerValue = omit(props, ['children', 'iconPrefix']);
+  const providerValue = omit(props, ['children']);
 
   const IconProviderPlaceholder = iconPrefix ? IconContext.Provider : Fragment;
 
diff --git a/packages/sqi-web/src/config-provider/__tests__/config-provider.test.tsx b/packages/sqi-web/src/config-provider/__tests__/config-provider.test.tsx
new file mode 100644
index 0000000..1feb7e0
--- /dev/null
+++ b/packages/sqi-web/src/config-provider/__tests__/config-provider.test.tsx
@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import ConfigProvider from '../ConfigProvider';
+import { ConfigContext } from '../context';
+
+// 创建一个测试组件来验证 ConfigProvider 的值
+const TestComponent = () => {
+  const context = React.useContext(ConfigContext);
+
+  return (
+    <div>
+      <span data-testid="prefixCls">{context.prefixCls}</span>
+      <span data-testid="iconPrefix">{context.iconPrefix}</span>
+      <span data-testid="size">{context.size}</span>
+    </div>
+  );
+};
+
+describe('ConfigProvider', () => {
+  it('should render children correctly', () => {
+    const { container } = render(
+      <ConfigProvider>
+        <div>Test Child</div>
+      </ConfigProvider>,
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.textContent).toBe('Test Child');
+  });
+
+  it('should provide default values', () => {
+    const { getByTestId } = render(
+      <ConfigProvider>
+        <TestComponent />
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('prefixCls').textContent).toBe('sqi');
+    expect(getByTestId('iconPrefix').textContent).toBe('sqi');
+  });
+
+  it('should allow customization of prefixCls', () => {
+    const { getByTestId } = render(
+      <ConfigProvider prefixCls="my-prefix">
+        <TestComponent />
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('prefixCls').textContent).toBe('my-prefix');
+    expect(getByTestId('iconPrefix').textContent).toBe('sqi'); // iconPrefix 应该保持默认值
+  });
+
+  it('should allow customization of iconPrefix', () => {
+    const { getByTestId } = render(
+      <ConfigProvider iconPrefix="my-icon">
+        <TestComponent />
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('iconPrefix').textContent).toBe('my-icon');
+    expect(getByTestId('prefixCls').textContent).toBe('sqi'); // prefixCls 应该保持默认值
+  });
+
+  it('should allow customization of both prefixCls and iconPrefix', () => {
+    const { getByTestId } = render(
+      <ConfigProvider prefixCls="my-prefix" iconPrefix="my-icon">
+        <TestComponent />
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('prefixCls').textContent).toBe('my-prefix');
+    expect(getByTestId('iconPrefix').textContent).toBe('my-icon');
+  });
+
+  it('should allow customization of size', () => {
+    const { getByTestId } = render(
+      <ConfigProvider size="lg">
+        <TestComponent />
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('size').textContent).toBe('lg');
+  });
+
+  it('should support componentConfig', () => {
+    const componentConfig = {
+      Alert: { type: 'success' as const },
+      Button: { type: 'primary' as const },
+    };
+
+    const ComponentWithConfig = () => {
+      const context = React.useContext(ConfigContext);
+      return (
+        <div>
+          <span data-testid="alertType">{context.componentConfig?.Alert?.type}</span>
+          <span data-testid="buttonType">{context.componentConfig?.Button?.type}</span>
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(
+      <ConfigProvider componentConfig={componentConfig}>
+        <ComponentWithConfig />
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('alertType').textContent).toBe('success');
+    expect(getByTestId('buttonType').textContent).toBe('primary');
+  });
+
+  it('should work with nested ConfigProviders', () => {
+    const { getByTestId } = render(
+      <ConfigProvider prefixCls="outer">
+        <ConfigProvider prefixCls="inner">
+          <TestComponent />
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+
+    expect(getByTestId('prefixCls').textContent).toBe('inner');
+  });
+});
diff --git a/packages/sqi-web/src/config-provider/type.ts b/packages/sqi-web/src/config-provider/type.ts
index 65540da..a41c4f0 100644
--- a/packages/sqi-web/src/config-provider/type.ts
+++ b/packages/sqi-web/src/config-provider/type.ts
@@ -31,7 +31,7 @@ export interface ConfigProviderProps {
   prefixCls?: string;
   /**
    * @description 组件图标前缀
-   * @default 'sqi-icon'
+   * @default 'sqi'
    */
   iconPrefix?: string;
   children?: ReactNode;
diff --git a/packages/sqi-web/src/divider/Divider.tsx b/packages/sqi-web/src/divider/Divider.tsx
index c3040ac..ec28da5 100644
--- a/packages/sqi-web/src/divider/Divider.tsx
+++ b/packages/sqi-web/src/divider/Divider.tsx
@@ -11,19 +11,25 @@ const defaultProps: DividerProps = {
 
 const Divider = forwardRef<HTMLDivElement, DividerProps>((baseProps: DividerProps, ref) => {
   const { prefixCls, componentConfig } = useContext(ConfigContext);
-  const props = useMergeProps(baseProps, defaultProps, componentConfig?.Divider);
-  const { direction, align, dashed, className, children, text, style } = props;
+  const { direction, align, dashed, className, children, text, style } = useMergeProps(
+    baseProps,
+    defaultProps,
+    componentConfig?.Divider,
+  );
 
   const mergeChildren = children || text;
   const hasText = direction !== 'vertical' && !!mergeChildren;
 
-  const classes = clsx(`${prefixCls}-divider`, {
-    [`${prefixCls}-divider-${direction}`]: direction,
-    [`${prefixCls}-divider-with-text`]: hasText,
-    [`${prefixCls}-divider-with-text-${align}`]: hasText,
-    [`${prefixCls}-divider-dashed`]: !!dashed,
+  const classes = clsx(
+    `${prefixCls}-divider`,
+    {
+      [`${prefixCls}-divider-${direction}`]: direction,
+      [`${prefixCls}-divider-with-text`]: hasText,
+      [`${prefixCls}-divider-with-text-${align}`]: hasText,
+      [`${prefixCls}-divider-dashed`]: !!dashed,
+    },
     className,
-  });
+  );
 
   return (
     <div className={classes} style={style} ref={ref}>
diff --git a/packages/sqi-web/src/divider/__tests__/__snapshots__/divider.test.tsx.snap b/packages/sqi-web/src/divider/__tests__/__snapshots__/divider.test.tsx.snap
new file mode 100644
index 0000000..ea313a4
--- /dev/null
+++ b/packages/sqi-web/src/divider/__tests__/__snapshots__/divider.test.tsx.snap
@@ -0,0 +1,98 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Divider > should combine className correctly 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal custom-class"
+/>
+`;
+
+exports[`Divider > should not render text for vertical divider 1`] = `
+<div
+  class="sqi-divider sqi-divider-vertical"
+/>
+`;
+
+exports[`Divider > should prioritize children over text prop 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal sqi-divider-with-text sqi-divider-with-text-center"
+>
+  <span
+    class="sqi-divider-inner-text"
+  >
+    Children Text
+  </span>
+</div>
+`;
+
+exports[`Divider > should render correctly with default props 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal"
+/>
+`;
+
+exports[`Divider > should render dashed divider 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal sqi-divider-dashed"
+/>
+`;
+
+exports[`Divider > should render vertical divider 1`] = `
+<div
+  class="sqi-divider sqi-divider-vertical"
+/>
+`;
+
+exports[`Divider > should render with text content 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal sqi-divider-with-text sqi-divider-with-text-center"
+>
+  <span
+    class="sqi-divider-inner-text"
+  >
+    Text Content
+  </span>
+</div>
+`;
+
+exports[`Divider > should render with text prop 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal sqi-divider-with-text sqi-divider-with-text-center"
+>
+  <span
+    class="sqi-divider-inner-text"
+  >
+    Text Prop
+  </span>
+</div>
+`;
+
+exports[`Divider > should support custom className and style 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal custom-class"
+  style="color: red;"
+/>
+`;
+
+exports[`Divider > should support text alignment 1`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal sqi-divider-with-text sqi-divider-with-text-right"
+>
+  <span
+    class="sqi-divider-inner-text"
+  >
+    Right Text
+  </span>
+</div>
+`;
+
+exports[`Divider > should support text alignment 2`] = `
+<div
+  class="sqi-divider sqi-divider-horizontal sqi-divider-with-text sqi-divider-with-text-center"
+>
+  <span
+    class="sqi-divider-inner-text"
+  >
+    Center Text
+  </span>
+</div>
+`;
diff --git a/packages/sqi-web/src/divider/__tests__/divider.test.tsx b/packages/sqi-web/src/divider/__tests__/divider.test.tsx
new file mode 100644
index 0000000..785020f
--- /dev/null
+++ b/packages/sqi-web/src/divider/__tests__/divider.test.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import Divider from '../Divider';
+
+describe('Divider', () => {
+  it('should render correctly with default props', () => {
+    const { container } = render(<Divider />);
+
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveClass('sqi-divider');
+    expect(container.firstChild).toHaveClass('sqi-divider-horizontal');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render vertical divider', () => {
+    const { container } = render(<Divider direction="vertical" />);
+
+    expect(container.firstChild).toHaveClass('sqi-divider-vertical');
+    expect(container.firstChild).not.toHaveClass('sqi-divider-horizontal');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render dashed divider', () => {
+    const { container } = render(<Divider dashed />);
+
+    expect(container.firstChild).toHaveClass('sqi-divider-dashed');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render with text content', () => {
+    const { container, getByText } = render(<Divider>Text Content</Divider>);
+
+    expect(container.firstChild).toHaveClass('sqi-divider-with-text');
+    expect(container.firstChild).toHaveClass('sqi-divider-with-text-center');
+    expect(getByText('Text Content')).toBeInTheDocument();
+    expect(getByText('Text Content')).toHaveClass('sqi-divider-inner-text');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render with text prop', () => {
+    const { container, getByText } = render(<Divider text="Text Prop" />);
+
+    expect(container.firstChild).toHaveClass('sqi-divider-with-text');
+    expect(getByText('Text Prop')).toBeInTheDocument();
+    expect(getByText('Text Prop')).toHaveClass('sqi-divider-inner-text');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should prioritize children over text prop', () => {
+    const { container, getByText } = render(<Divider text="Text Prop">Children Text</Divider>);
+    expect(getByText('Children Text')).toBeInTheDocument();
+    expect(container.querySelector('.sqi-divider-inner-text')?.textContent).toBe('Children Text');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support text alignment', () => {
+    // Left alignment
+    const { container: leftContainer, rerender } = render(<Divider align="left">Left Text</Divider>);
+    expect(leftContainer.firstChild).toHaveClass('sqi-divider-with-text-left');
+
+    // Right alignment
+    rerender(<Divider align="right">Right Text</Divider>);
+    expect(leftContainer.firstChild).toHaveClass('sqi-divider-with-text-right');
+
+    // Center alignment (default)
+    const { container: rightContainer } = render(<Divider align="center">Center Text</Divider>);
+    expect(rightContainer.firstChild).toHaveClass('sqi-divider-with-text-center');
+
+    expect(leftContainer.firstChild).toMatchSnapshot();
+    expect(rightContainer.firstChild).toMatchSnapshot();
+  });
+
+  it('should not render text for vertical divider', () => {
+    const { container, queryByText } = render(<Divider direction="vertical">Vertical Text</Divider>);
+
+    expect(container.firstChild).not.toHaveClass('sqi-divider-with-text');
+    expect(queryByText('Vertical Text')).not.toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support custom className and style', () => {
+    const { container } = render(<Divider className="custom-class" style={{ color: 'red' }} />);
+
+    expect(container.firstChild).toHaveClass('custom-class');
+    expect((container.firstChild as HTMLDivElement).getAttribute('style')).toContain('red');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should combine className correctly', () => {
+    const { container } = render(<Divider className="custom-class" />);
+
+    expect(container.firstChild).toHaveClass('sqi-divider');
+    expect(container.firstChild).toHaveClass('sqi-divider-horizontal');
+    expect(container.firstChild).toHaveClass('custom-class');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/sqi-web/src/grid/__tests__/__snapshots__/col.test.tsx.snap b/packages/sqi-web/src/grid/__tests__/__snapshots__/col.test.tsx.snap
new file mode 100644
index 0000000..9278261
--- /dev/null
+++ b/packages/sqi-web/src/grid/__tests__/__snapshots__/col.test.tsx.snap
@@ -0,0 +1,101 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Col > should render correctly with default props 1`] = `
+<div
+  class="sqi-col"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support custom className and style 1`] = `
+<div
+  class="sqi-col custom-col"
+  style="background-color: blue;"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support flex prop with basis string 1`] = `
+<div
+  class="sqi-col"
+  style="flex: 0 0 200px;"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support flex prop with flex string 1`] = `
+<div
+  class="sqi-col"
+  style="flex: 1 1 auto;"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support flex prop with number 1`] = `
+<div
+  class="sqi-col"
+  style="flex: 1 1 auto;"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support gutter from Row context 1`] = `
+<div>
+  <div
+    class="sqi-row sqi-row-align-start sqi-row-justify-start"
+    style="margin: -12px -8px -12px -8px;"
+  >
+    <div
+      class="sqi-col sqi-col-12"
+      style="padding: 12px 8px 12px 8px;"
+    >
+      Col Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Col > should support offset prop 1`] = `
+<div
+  class="sqi-col sqi-col-offset-6"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support order prop 1`] = `
+<div
+  class="sqi-col sqi-col-order-2"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support responsive object props 1`] = `
+<div
+  class="sqi-col sqi-col-xs-12 sqi-col-xs-offset-2 sqi-col-sm-8 sqi-col-md-6 sqi-col-md-order-1"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support responsive props 1`] = `
+<div
+  class="sqi-col sqi-col-xs-12 sqi-col-sm-8 sqi-col-md-6 sqi-col-lg-4"
+>
+  Col Content
+</div>
+`;
+
+exports[`Col > should support span prop 1`] = `
+<div
+  class="sqi-col sqi-col-12"
+>
+  Col Content
+</div>
+`;
diff --git a/packages/sqi-web/src/grid/__tests__/__snapshots__/row.test.tsx.snap b/packages/sqi-web/src/grid/__tests__/__snapshots__/row.test.tsx.snap
new file mode 100644
index 0000000..db88b20
--- /dev/null
+++ b/packages/sqi-web/src/grid/__tests__/__snapshots__/row.test.tsx.snap
@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Row > should render correctly with default props 1`] = `
+<div
+  class="sqi-row sqi-row-align-start sqi-row-justify-start"
+>
+  Row Content
+</div>
+`;
+
+exports[`Row > should support custom className and style 1`] = `
+<div
+  class="sqi-row sqi-row-align-start sqi-row-justify-start custom-row"
+  style="background-color: red;"
+>
+  Row Content
+</div>
+`;
+
+exports[`Row > should support gutter prop 1`] = `
+<div
+  class="sqi-row sqi-row-align-start sqi-row-justify-start"
+  style="margin-left: -8px; margin-right: -8px;"
+>
+  Row Content
+</div>
+`;
+
+exports[`Row > should support vertical gutter 1`] = `
+<div
+  class="sqi-row sqi-row-align-start sqi-row-justify-start"
+  style="margin: -12px -8px -12px -8px;"
+>
+  Row Content
+</div>
+`;
+
+exports[`Row > should support wrap prop 1`] = `
+<div
+  class="sqi-row sqi-row-nowrap sqi-row-align-start sqi-row-justify-start"
+>
+  Row Content
+</div>
+`;
diff --git a/packages/sqi-web/src/grid/__tests__/col.test.tsx b/packages/sqi-web/src/grid/__tests__/col.test.tsx
new file mode 100644
index 0000000..85bfcd6
--- /dev/null
+++ b/packages/sqi-web/src/grid/__tests__/col.test.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import Row from '../Row';
+import Col from '../Col';
+import { mockMatchMedia } from './util';
+
+describe('Col', () => {
+  beforeEach(() => {
+    mockMatchMedia();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { container } = render(<Col>Col Content</Col>);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveClass('sqi-col');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support span prop', () => {
+    const { container } = render(<Col span={12}>Col Content</Col>);
+    expect(container.firstChild).toHaveClass('sqi-col-12');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support offset prop', () => {
+    const { container } = render(<Col offset={6}>Col Content</Col>);
+    expect(container.firstChild).toHaveClass('sqi-col-offset-6');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support order prop', () => {
+    const { container } = render(<Col order={2}>Col Content</Col>);
+    expect(container.firstChild).toHaveClass('sqi-col-order-2');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support flex prop with number', () => {
+    const { container } = render(<Col flex={1}>Col Content</Col>);
+    expect(container.firstChild).toHaveStyle('flex: 1 1 auto');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support flex prop with basis string', () => {
+    const { container } = render(<Col flex="200px">Col Content</Col>);
+    expect(container.firstChild).toHaveStyle('flex: 0 0 200px');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support flex prop with flex string', () => {
+    const { container } = render(<Col flex="1 1 auto">Col Content</Col>);
+    expect(container.firstChild).toHaveStyle('flex: 1 1 auto');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support responsive props', () => {
+    const { container } = render(
+      <Col xs={12} sm={8} md={6} lg={4}>
+        Col Content
+      </Col>,
+    );
+    expect(container.firstChild).toHaveClass('sqi-col-xs-12');
+    expect(container.firstChild).toHaveClass('sqi-col-sm-8');
+    expect(container.firstChild).toHaveClass('sqi-col-md-6');
+    expect(container.firstChild).toHaveClass('sqi-col-lg-4');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support responsive object props', () => {
+    const { container } = render(
+      <Col xs={{ span: 12, offset: 2 }} sm={{ span: 8 }} md={{ span: 6, order: 1 }}>
+        Col Content
+      </Col>,
+    );
+    expect(container.firstChild).toHaveClass('sqi-col-xs-12');
+    expect(container.firstChild).toHaveClass('sqi-col-xs-offset-2');
+    expect(container.firstChild).toHaveClass('sqi-col-sm-8');
+    expect(container.firstChild).toHaveClass('sqi-col-md-6');
+    expect(container.firstChild).toHaveClass('sqi-col-md-order-1');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support gutter from Row context', () => {
+    const { container } = render(
+      <Row gutter={[16, 24]}>
+        <Col span={12}>Col Content</Col>
+      </Row>,
+    );
+
+    const col = container.querySelector('.sqi-col');
+    expect(col).toHaveStyle('padding-left: 8px');
+    expect(col).toHaveStyle('padding-right: 8px');
+    expect(col).toHaveStyle('padding-top: 12px');
+    expect(col).toHaveStyle('padding-bottom: 12px');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support custom className and style', () => {
+    const { container } = render(
+      <Col className="custom-col" style={{ backgroundColor: 'blue' }}>
+        Col Content
+      </Col>,
+    );
+    expect(container.firstChild).toHaveClass('custom-col');
+    expect((container.firstChild as HTMLDivElement).getAttribute('style')).toContain('blue');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/sqi-web/src/grid/__tests__/row.test.tsx b/packages/sqi-web/src/grid/__tests__/row.test.tsx
new file mode 100644
index 0000000..1ee5875
--- /dev/null
+++ b/packages/sqi-web/src/grid/__tests__/row.test.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import Row from '../Row';
+import { mockMatchMedia } from './util';
+
+describe('Row', () => {
+  beforeEach(() => {
+    mockMatchMedia();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { container } = render(<Row>Row Content</Row>);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveClass('sqi-row');
+    expect(container.firstChild).not.toHaveClass('sqi-row-nowrap');
+    expect(container.firstChild).toHaveClass('sqi-row-align-start');
+    expect(container.firstChild).toHaveClass('sqi-row-justify-start');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support align prop', () => {
+    const { container, rerender } = render(<Row align="center">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-align-center');
+
+    rerender(<Row align="end">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-align-end');
+
+    rerender(<Row align="stretch">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-align-stretch');
+  });
+
+  it('should support justify prop', () => {
+    const { container, rerender } = render(<Row justify="center">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-justify-center');
+
+    rerender(<Row justify="end">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-justify-end');
+
+    rerender(<Row justify="space-around">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-justify-space-around');
+
+    rerender(<Row justify="space-between">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-justify-space-between');
+  });
+
+  it('should support wrap prop', () => {
+    const { container } = render(<Row wrap={false}>Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row-nowrap');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support gutter prop', () => {
+    const { container } = render(<Row gutter={16}>Row Content</Row>);
+    expect(container.firstChild).toHaveStyle('margin-left: -8px');
+    expect(container.firstChild).toHaveStyle('margin-right: -8px');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support vertical gutter', () => {
+    const { container } = render(<Row gutter={[16, 24]}>Row Content</Row>);
+    expect(container.firstChild).toHaveStyle('margin-left: -8px');
+    expect(container.firstChild).toHaveStyle('margin-right: -8px');
+    expect(container.firstChild).toHaveStyle('margin-top: -12px');
+    expect(container.firstChild).toHaveStyle('margin-bottom: -12px');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support custom className and style', () => {
+    const { container } = render(
+      <Row className="custom-row" style={{ backgroundColor: 'red' }}>
+        Row Content
+      </Row>,
+    );
+    expect(container.firstChild).toHaveClass('custom-row');
+    expect((container.firstChild as HTMLDivElement).getAttribute('style')).toContain('red');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should combine className correctly', () => {
+    const { container } = render(<Row className="custom-row">Row Content</Row>);
+    expect(container.firstChild).toHaveClass('sqi-row');
+    expect(container.firstChild).toHaveClass('custom-row');
+  });
+});
diff --git a/packages/sqi-web/src/grid/__tests__/util.ts b/packages/sqi-web/src/grid/__tests__/util.ts
new file mode 100644
index 0000000..1f0b4fe
--- /dev/null
+++ b/packages/sqi-web/src/grid/__tests__/util.ts
@@ -0,0 +1,17 @@
+import { vi } from 'vitest';
+
+export const mockMatchMedia = () => {
+  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(),
+    })),
+  });
+};
diff --git a/packages/sqi-web/src/input/Input.tsx b/packages/sqi-web/src/input/Input.tsx
index 26744fa..055a291 100644
--- a/packages/sqi-web/src/input/Input.tsx
+++ b/packages/sqi-web/src/input/Input.tsx
@@ -247,7 +247,7 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
 
   // input core element
   const inputElement = (
-    <span
+    <div
       role="group"
       ref={addonBefore || addonAfter ? undefined : wrapperRef}
       className={wrapperClasses}
@@ -271,7 +271,7 @@ const Input = forwardRef<InputRef, InputProps>((baseProps, ref) => {
       {clearElement}
       {suffixElement}
       {limitLengthElement}
-    </span>
+    </div>
   );
 
   const addBeforeElement = addonBefore && <span className={clsx(`${prefixCls}-input-group-addon`)}>{addonBefore}</span>;
diff --git a/packages/sqi-web/src/input/__tests__/__snapshots__/input.test.tsx.snap b/packages/sqi-web/src/input/__tests__/__snapshots__/input.test.tsx.snap
new file mode 100644
index 0000000..bf40ec4
--- /dev/null
+++ b/packages/sqi-web/src/input/__tests__/__snapshots__/input.test.tsx.snap
@@ -0,0 +1,155 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Input > should render correctly with default props 1`] = `
+<div
+  class="sqi-input sqi-input-variant-outline sqi-input-size-md sqi-input-align-left"
+  role="group"
+>
+  <input
+    class="sqi-input-real"
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Input > should support addonBefore and addonAfter 1`] = `
+<div>
+  <div
+    class="sqi-input-group"
+  >
+    <span
+      class="sqi-input-group-addon"
+    >
+      http://
+    </span>
+    <div
+      class="sqi-input sqi-input-variant-outline sqi-input-size-md sqi-input-align-left"
+      role="group"
+    >
+      <input
+        class="sqi-input-real"
+        type="text"
+        value=""
+      />
+    </div>
+    <span
+      class="sqi-input-group-addon"
+    >
+      .com
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Input > should support maxLength object config 1`] = `
+<div>
+  <div
+    class="sqi-input sqi-input-variant-outline sqi-input-size-md sqi-input-align-left sqi-input-limit-length-error"
+    role="group"
+  >
+    <input
+      class="sqi-input-real"
+      type="text"
+      value="123456"
+    />
+    <span
+      class="sqi-input-limit-length-text"
+    >
+      6
+      /
+      5
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Input > should support password type with visibility toggle 1`] = `
+<div>
+  <div
+    class="sqi-input sqi-input-variant-outline sqi-input-size-md sqi-input-align-left sqi-input-focus"
+    role="group"
+  >
+    <input
+      class="sqi-input-real"
+      type="password"
+      value=""
+    />
+    <span
+      class="sqi-input-suffix sqi-input-suffix-password"
+      role="button"
+      tabindex="-1"
+    >
+      <span
+        aria-label="browse-off"
+        class="sqi-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 26 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.99999 1.58582L10.1714 7.75774L17.2425 14.8288L23.4137 21L21.9995 22.4142L19.0345 19.4492C17.2447 20.4377 15.1866 21.0001 12.9996 21.0001C7.42102 21.0001 2.69842 17.3465 1.08922 12.3042L0.992188 12.0001L1.08922 11.6961C1.85645 9.29201 3.33009 7.20571 5.26511 5.67975L2.58567 2.99993L3.99999 1.58582ZM6.69098 7.10574C5.05507 8.33729 3.79122 10.0353 3.09676 12.0001C4.53843 16.0793 8.42915 19.0001 12.9996 19.0001C14.6314 19.0001 16.1745 18.6285 17.5507 17.9655L15.7571 16.1719C14.9668 16.695 14.0185 17.0003 12.9999 17.0003C10.2385 17.0003 7.99989 14.7618 7.99989 12.0003C7.99989 10.9817 8.3052 10.0334 8.82835 9.24312L6.69098 7.10574ZM10.292 10.7068C10.1046 11.0984 9.99989 11.5368 9.99989 12.0003C9.99989 13.6572 11.343 15.0003 12.9999 15.0003C13.4634 15.0003 13.9018 14.8956 14.2934 14.7082L10.292 10.7068ZM13 5.00003C12.4234 5.00003 11.8583 5.04642 11.3081 5.13548L10.321 5.29527L10.0014 3.32097L10.9885 3.16117C11.644 3.05508 12.3159 3.00003 13 3.00003C18.5786 3.00003 23.3012 6.65367 24.9104 11.696L25.0074 12L24.9104 12.3041C24.4968 13.5999 23.878 14.8034 23.0926 15.8763L22.5019 16.6833L20.8881 15.5019L21.4788 14.695C22.0769 13.8778 22.5595 12.9715 22.9028 12C21.4612 7.92082 17.5704 5.00003 13 5.00003ZM13.5132 6.92636L14.4691 7.21985C16.0499 7.70515 17.2953 8.95049 17.7806 10.5313L18.0741 11.4873L16.1621 12.0742L15.8687 11.1183C15.578 10.1715 14.829 9.42243 13.8822 9.13178L12.9262 8.8383L13.5132 6.92636Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Input > should support prefix and suffix 1`] = `
+<div
+  class="sqi-input sqi-input-variant-outline sqi-input-size-md sqi-input-align-left"
+  role="group"
+>
+  <span
+    class="sqi-input-prefix"
+  >
+    $
+  </span>
+  <input
+    class="sqi-input-real"
+    type="text"
+    value=""
+  />
+  <span
+    class="sqi-input-suffix"
+    role="button"
+    tabindex="-1"
+  >
+    .00
+  </span>
+</div>
+`;
+
+exports[`Input > should support tips 1`] = `
+<div>
+  <div
+    class="sqi-input-group-extra"
+  >
+    <div
+      class="sqi-input sqi-input-variant-outline sqi-input-size-md sqi-input-align-left"
+      role="group"
+    >
+      <input
+        class="sqi-input-real"
+        type="text"
+        value=""
+      />
+    </div>
+    <div
+      class="sqi-input-tips"
+    >
+      This is a tip
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/sqi-web/src/input/__tests__/input.test.tsx b/packages/sqi-web/src/input/__tests__/input.test.tsx
new file mode 100644
index 0000000..77f07ea
--- /dev/null
+++ b/packages/sqi-web/src/input/__tests__/input.test.tsx
@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import Input from '../Input';
+
+describe('Input', () => {
+  it('should render correctly with default props', () => {
+    const { container } = render(<Input />);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveClass('sqi-input');
+    expect(container.firstChild).toHaveClass('sqi-input-size-md');
+    expect(container.firstChild).toHaveClass('sqi-input-variant-outline');
+    expect(container.firstChild).toHaveClass('sqi-input-align-left');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support different sizes', () => {
+    const { container, rerender } = render(<Input size="sm" />);
+    expect(container.firstChild).toHaveClass('sqi-input-size-sm');
+
+    rerender(<Input size="lg" />);
+    expect(container.firstChild).toHaveClass('sqi-input-size-lg');
+  });
+
+  it('should support different variants', () => {
+    const { container, rerender } = render(<Input variant="borderless" />);
+    expect(container.firstChild).toHaveClass('sqi-input-variant-borderless');
+
+    rerender(<Input variant="underline" />);
+    expect(container.firstChild).toHaveClass('sqi-input-variant-underline');
+  });
+
+  it('should support different alignments', () => {
+    const { container, rerender } = render(<Input align="center" />);
+    expect(container.firstChild).toHaveClass('sqi-input-align-center');
+
+    rerender(<Input align="right" />);
+    expect(container.firstChild).toHaveClass('sqi-input-align-right');
+  });
+
+  it('should support status', () => {
+    const { container } = render(<Input status="error" />);
+    expect(container.firstChild).toHaveClass('sqi-input-status-error');
+  });
+
+  it('should support placeholder', () => {
+    const { getByPlaceholderText } = render(<Input placeholder="Enter text" />);
+    expect(getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  it('should support defaultValue', () => {
+    const { getByDisplayValue } = render(<Input defaultValue="Default value" />);
+    expect(getByDisplayValue('Default value')).toBeInTheDocument();
+  });
+
+  it('should support value (controlled mode)', () => {
+    const { getByDisplayValue } = render(<Input value="Controlled value" />);
+    expect(getByDisplayValue('Controlled value')).toBeInTheDocument();
+  });
+
+  it('should trigger onChange when input value changes', () => {
+    const onChange = vi.fn();
+    const { container } = render(<Input onChange={onChange} />);
+
+    const input = container.querySelector('input');
+    fireEvent.change(input!, { target: { value: 'new value' } });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('new value', expect.any(Object));
+  });
+
+  it('should support disabled state', () => {
+    const { container } = render(<Input disabled />);
+
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+
+  it('should support readOnly state', () => {
+    const { container } = render(<Input readOnly />);
+
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('readonly');
+  });
+
+  it('should support allowClear', () => {
+    const onChange = vi.fn();
+    const { container } = render(<Input allowClear defaultValue="Clearable value" onChange={onChange} />);
+
+    const clearButton = container.querySelector('button');
+    expect(clearButton).toBeInTheDocument();
+
+    fireEvent.click(clearButton!);
+    expect(onChange).toHaveBeenCalledWith('', expect.any(Object));
+
+    const input = container.querySelector('input');
+    expect(input).toHaveValue('');
+  });
+
+  it('should not show clear button when disabled', () => {
+    const { container } = render(<Input allowClear defaultValue="Clearable value" disabled />);
+
+    const clearButton = container.querySelector('button');
+    expect(clearButton).not.toBeInTheDocument();
+  });
+
+  it('should not show clear button when no value', () => {
+    const { container } = render(<Input allowClear />);
+
+    const clearButton = container.querySelector('button');
+    expect(clearButton).not.toBeInTheDocument();
+  });
+
+  it('should support prefix and suffix', () => {
+    const { container } = render(<Input prefix="$" suffix=".00" />);
+
+    expect(container.querySelector('.sqi-input-prefix')).toBeInTheDocument();
+    expect(container.querySelector('.sqi-input-suffix')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should support addonBefore and addonAfter', () => {
+    const { container } = render(<Input addonBefore="http://" addonAfter=".com" />);
+
+    expect(container.querySelector('.sqi-input-group-addon')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support password type with visibility toggle', () => {
+    const { container } = render(<Input type="password" />);
+
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('type', 'password');
+
+    // 密码可见性切换是一个具有 role="button" 的 span 元素，而不是 button 元素
+    const toggleButton = container.querySelector('[role="button"]');
+    expect(toggleButton).toBeInTheDocument();
+
+    fireEvent.click(toggleButton!);
+    expect(input).toHaveAttribute('type', 'text');
+
+    fireEvent.click(toggleButton!);
+    expect(input).toHaveAttribute('type', 'password');
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support custom visibilityToggle', () => {
+    const onVisibleChange = vi.fn();
+    const { rerender, container } = render(
+      <Input type="password" visibilityToggle={{ visible: false, onVisibleChange }} />,
+    );
+
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('type', 'password');
+
+    const toggleButton = container.querySelector('[role="button"]');
+    fireEvent.click(toggleButton!);
+    expect(onVisibleChange).toHaveBeenCalledWith(true);
+
+    rerender(<Input type="password" visibilityToggle={{ visible: true, onVisibleChange }} />);
+
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('should support maxLength', () => {
+    const { container } = render(<Input maxLength={5} defaultValue="123456" />);
+
+    const input = container.querySelector('input');
+    expect(input).toHaveValue('12345');
+  });
+
+  it('should support maxLength object config', () => {
+    const { container } = render(
+      <Input maxLength={{ length: 5, showLimit: true, errorOnly: true }} defaultValue="123456" />,
+    );
+
+    expect(container.querySelector('.sqi-input-limit-length-text')).toBeInTheDocument();
+    // 检查包含错误类的元素，应该是整个 input wrapper
+    expect(container.firstChild).toHaveClass('sqi-input-limit-length-error');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support tips', () => {
+    const { container } = render(<Input tips="This is a tip" />);
+
+    expect(container.querySelector('.sqi-input-tips')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support tips with status', () => {
+    const { container } = render(<Input tips="Error message" status="error" />);
+
+    expect(container.querySelector('.sqi-input-tips')).toBeInTheDocument();
+    expect(container.querySelector('.sqi-input-tips')).toHaveClass('sqi-input-tips-status-error');
+  });
+
+  it('should handle focus and blur events', () => {
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+    const { container } = render(<Input onFocus={onFocus} onBlur={onBlur} />);
+
+    const input = container.querySelector('input');
+    fireEvent.focus(input!);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(container.querySelector('[role="group"]')).toHaveClass('sqi-input-focus');
+
+    fireEvent.blur(input!);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(container.querySelector('[role="group"]')).not.toHaveClass('sqi-input-focus');
+  });
+
+  it('should support ref methods', () => {
+    const ref = React.createRef<any>();
+    render(<Input ref={ref} />);
+
+    expect(ref.current).toBeDefined();
+    expect(ref.current.focus).toBeInstanceOf(Function);
+    expect(ref.current.blur).toBeInstanceOf(Function);
+    expect(ref.current.select).toBeInstanceOf(Function);
+    expect(ref.current.currentElement).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current.inputElement).toBeInstanceOf(HTMLInputElement);
+  });
+});
diff --git a/packages/sqi-web/src/popup/Popup.tsx b/packages/sqi-web/src/popup/Popup.tsx
index d7042a8..bfb7b04 100644
--- a/packages/sqi-web/src/popup/Popup.tsx
+++ b/packages/sqi-web/src/popup/Popup.tsx
@@ -1,10 +1,10 @@
 'use client';
 import React, { forwardRef, isValidElement, useContext, useImperativeHandle, useRef } from 'react';
-import type { PopupProps } from './type';
+import clsx from 'clsx';
 import { useMergeProps } from '@sqi-ui/hooks';
-import { ConfigContext } from '../config-provider/context';
 import Trigger from '../trigger';
-import clsx from 'clsx';
+import { ConfigContext } from '../config-provider/context';
+import type { PopupProps } from './type';
 
 const defaultProps: PopupProps = {
   trigger: 'hover',
diff --git a/packages/sqi-web/src/popup/__tests__/popup.test.tsx b/packages/sqi-web/src/popup/__tests__/popup.test.tsx
new file mode 100644
index 0000000..67ce6f3
--- /dev/null
+++ b/packages/sqi-web/src/popup/__tests__/popup.test.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import Popup from '../Popup';
+
+describe('Popup', () => {
+  test('should render correctly with hover', async () => {
+    const { container, queryByTestId } = render(
+      <Popup content={<div data-testid="popup-test-id">Popup content</div>}>
+        <button type="button">Hover me</button>
+      </Popup>,
+    );
+
+    // mouse enter before, popup is unmount
+    await waitFor(() => {
+      const popupEl = document.querySelector('.sqi-popup');
+      expect(popupEl).toBeNull();
+      const popupContentEl = queryByTestId('popup-test-id');
+      expect(popupContentEl).not.toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.mouseEnter(container.firstChild!);
+    });
+
+    await waitFor(() => {
+      const popupContentEl = queryByTestId('popup-test-id');
+      expect(popupContentEl).not.toBeNull();
+      expect(popupContentEl).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.mouseLeave(container.firstChild!);
+    });
+
+    await waitFor(() => {
+      const popupEl2 = queryByTestId('popup-test-id');
+      expect(popupEl2).toBeNull();
+    });
+  });
+
+  test('should not render with empty children', async () => {
+    const { container } = render(<Popup content={<div data-testid="popup-test-id">Popup content</div>}></Popup>);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('should support string children', async () => {
+    const { container, queryByText } = render(
+      <Popup content="Popup string content">
+        <button type="button">Hover me</button>
+      </Popup>,
+    );
+
+    act(() => {
+      fireEvent.mouseEnter(container.firstChild!);
+    });
+
+    await waitFor(() => {
+      const popupEl2 = queryByText('Popup string content');
+      expect(popupEl2).not.toBeNull();
+      expect(popupEl2).toBeInTheDocument();
+    });
+  });
+
+  test('should not render arrow with showArrow is false', async () => {
+    const TestComponent = () => {
+      const [showArrow, setShowArrow] = React.useState(true);
+
+      return (
+        <>
+          <button data-testid="control-arrow" type="button" onClick={() => setShowArrow(false)}>
+            Hide Arrow
+          </button>
+          <Popup content="Popup content" showArrow={showArrow}>
+            <button data-testid="hover-trigger" type="button">
+              Hover me
+            </button>
+          </Popup>
+        </>
+      );
+    };
+
+    const { queryByTestId } = render(<TestComponent />);
+
+    act(() => {
+      fireEvent.mouseEnter(queryByTestId('hover-trigger')!);
+    });
+
+    await waitFor(() => {
+      const arrowEl = document.querySelector('.sqi-popup-arrow');
+      expect(arrowEl).not.toBeNull();
+      expect(arrowEl).toBeInTheDocument();
+    });
+
+    act(() => {
+      fireEvent.mouseLeave(queryByTestId('hover-trigger')!);
+    });
+
+    act(() => {
+      fireEvent.click(queryByTestId('control-arrow')!);
+    });
+
+    await waitFor(() => {
+      const arrowEl = document.querySelector('.sqi-popup-arrow');
+      expect(arrowEl).toBeNull();
+      expect(arrowEl).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/sqi-web/src/radio/__tests__/__snapshots__/radio-group.test.tsx.snap b/packages/sqi-web/src/radio/__tests__/__snapshots__/radio-group.test.tsx.snap
new file mode 100644
index 0000000..2971a06
--- /dev/null
+++ b/packages/sqi-web/src/radio/__tests__/__snapshots__/radio-group.test.tsx.snap
@@ -0,0 +1,509 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RadioGroup > should render correctly 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r0»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r0»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support button appearance with options configuration 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-button-wrapper sqi-radio-button-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio-button"
+    >
+      <input
+        class="sqi-radio-button-input"
+        name="«r7»"
+        type="radio"
+        value="Radio1"
+      />
+      <span
+        class="sqi-radio-button-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-button-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-button-wrapper sqi-radio-button-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio-button"
+    >
+      <input
+        class="sqi-radio-button-input"
+        name="«r7»"
+        type="radio"
+        value="Radio2"
+      />
+      <span
+        class="sqi-radio-button-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-button-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support buttonVariant filled 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md sqi-radio-wrapper-filled"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«rb»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md sqi-radio-wrapper-filled"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«rb»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support defaultValue 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r1»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-checked sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-checked"
+    >
+      <input
+        checked=""
+        class="sqi-radio-input"
+        name="«r1»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support disabled 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-disabled sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-disabled"
+    >
+      <input
+        class="sqi-radio-input"
+        disabled=""
+        name="«r3»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-disabled sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-disabled"
+    >
+      <input
+        class="sqi-radio-input"
+        disabled=""
+        name="«r3»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support options prop 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r8»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r8»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-disabled sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-disabled"
+    >
+      <input
+        class="sqi-radio-input"
+        disabled=""
+        name="«r8»"
+        type="radio"
+        value="3"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio3
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support options with string values 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r9»"
+        type="radio"
+        value="Apple"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Apple
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r9»"
+        type="radio"
+        value="Banana"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Banana
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r9»"
+        type="radio"
+        value="Orange"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Orange
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support size attribute 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-lg"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r6»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-lg"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r6»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`RadioGroup > should support value 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-checked sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-checked"
+    >
+      <input
+        checked=""
+        class="sqi-radio-input"
+        name="«r2»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r2»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
diff --git a/packages/sqi-web/src/radio/__tests__/__snapshots__/radio.test.tsx.snap b/packages/sqi-web/src/radio/__tests__/__snapshots__/radio.test.tsx.snap
new file mode 100644
index 0000000..ab70ade
--- /dev/null
+++ b/packages/sqi-web/src/radio/__tests__/__snapshots__/radio.test.tsx.snap
@@ -0,0 +1,248 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Radio > should render correctly 1`] = `
+<label
+  class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+>
+  <span
+    class="sqi-radio"
+  >
+    <input
+      class="sqi-radio-input"
+      type="radio"
+    />
+    <span
+      class="sqi-radio-inner"
+    />
+  </span>
+  <span
+    class="sqi-radio-label"
+  >
+    Radio
+  </span>
+</label>
+`;
+
+exports[`Radio > should support button style when _IS_BUTTON_ is true 1`] = `
+<label
+  class="sqi-radio-button-wrapper sqi-radio-button-wrapper-size-md"
+>
+  <span
+    class="sqi-radio-button"
+  >
+    <input
+      class="sqi-radio-button-input"
+      type="radio"
+    />
+    <span
+      class="sqi-radio-button-inner"
+    />
+  </span>
+  <span
+    class="sqi-radio-button-label"
+  >
+    Button Radio
+  </span>
+</label>
+`;
+
+exports[`Radio > should support checked 1`] = `
+<label
+  class="sqi-radio-wrapper sqi-radio-wrapper-checked sqi-radio-wrapper-size-md"
+>
+  <span
+    class="sqi-radio sqi-radio-checked"
+  >
+    <input
+      checked=""
+      class="sqi-radio-input"
+      type="radio"
+    />
+    <span
+      class="sqi-radio-inner"
+    />
+  </span>
+  <span
+    class="sqi-radio-label"
+  >
+    Radio
+  </span>
+</label>
+`;
+
+exports[`Radio > should support defaultChecked 1`] = `
+<label
+  class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+>
+  <span
+    class="sqi-radio sqi-radio-checked"
+  >
+    <input
+      checked=""
+      class="sqi-radio-input"
+      type="radio"
+    />
+    <span
+      class="sqi-radio-inner"
+    />
+  </span>
+  <span
+    class="sqi-radio-label"
+  >
+    Radio
+  </span>
+</label>
+`;
+
+exports[`Radio > should support disabled 1`] = `
+<label
+  class="sqi-radio-wrapper sqi-radio-wrapper-disabled sqi-radio-wrapper-size-md"
+>
+  <span
+    class="sqi-radio sqi-radio-disabled"
+  >
+    <input
+      class="sqi-radio-input"
+      disabled=""
+      type="radio"
+    />
+    <span
+      class="sqi-radio-inner"
+    />
+  </span>
+  <span
+    class="sqi-radio-label"
+  >
+    Radio
+  </span>
+</label>
+`;
+
+exports[`Radio > should support function as children 1`] = `
+<div>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-checked sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-checked"
+      style="display: none;"
+    >
+      <input
+        checked=""
+        class="sqi-radio-input"
+        type="radio"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span>
+      Checked
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Radio > should trigger onChange in group 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        checked=""
+        class="sqi-radio-input"
+        name="«r1»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-checked sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-checked"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r1»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Radio > should work in group 1`] = `
+<div
+  class="sqi-radio-group"
+>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio"
+    >
+      <input
+        class="sqi-radio-input"
+        name="«r0»"
+        type="radio"
+        value="1"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio1
+    </span>
+  </label>
+  <label
+    class="sqi-radio-wrapper sqi-radio-wrapper-checked sqi-radio-wrapper-size-md"
+  >
+    <span
+      class="sqi-radio sqi-radio-checked"
+    >
+      <input
+        checked=""
+        class="sqi-radio-input"
+        name="«r0»"
+        type="radio"
+        value="2"
+      />
+      <span
+        class="sqi-radio-inner"
+      />
+    </span>
+    <span
+      class="sqi-radio-label"
+    >
+      Radio2
+    </span>
+  </label>
+</div>
+`;
diff --git a/packages/sqi-web/src/radio/__tests__/radio-group.test.tsx b/packages/sqi-web/src/radio/__tests__/radio-group.test.tsx
new file mode 100644
index 0000000..94298d9
--- /dev/null
+++ b/packages/sqi-web/src/radio/__tests__/radio-group.test.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { describe, expect, test, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import RadioGroup from '../RadioGroup';
+import Radio from '../Radio';
+
+describe('RadioGroup', () => {
+  test('should render correctly', () => {
+    const { container } = render(
+      <RadioGroup>
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+    expect(container).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support defaultValue', () => {
+    const { container, getAllByRole } = render(
+      <RadioGroup defaultValue="2">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).not.toBeChecked();
+    expect(radios[1]).toBeChecked();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support value', () => {
+    const { container, getAllByRole } = render(
+      <RadioGroup value="1">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).toBeChecked();
+    expect(radios[1]).not.toBeChecked();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support disabled', () => {
+    const { container, getAllByRole } = render(
+      <RadioGroup disabled>
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).toBeDisabled();
+    expect(radios[1]).toBeDisabled();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should trigger onChange when radio is clicked', () => {
+    const handleChange = vi.fn();
+    const { getAllByRole } = render(
+      <RadioGroup onChange={handleChange}>
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const radios = getAllByRole('radio');
+    fireEvent.click(radios[1]);
+
+    expect(handleChange).toBeCalled();
+    expect(handleChange.mock.calls[0][0].target.value).toBe('2');
+  });
+
+  test('should support name attribute', () => {
+    const { container } = render(
+      <RadioGroup name="test-group">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const inputs = container.querySelectorAll('input');
+    expect(inputs[0]).toHaveAttribute('name', 'test-group');
+    expect(inputs[1]).toHaveAttribute('name', 'test-group');
+  });
+
+  test('should support size attribute', () => {
+    const { container } = render(
+      <RadioGroup size="lg">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    expect(container.querySelector('.sqi-radio-wrapper-size-lg')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support button appearance with options configuration', () => {
+    const { container } = render(<RadioGroup appearance="button" options={['Radio1', 'Radio2']} />);
+
+    expect(container.querySelector('.sqi-radio-button-wrapper')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support options prop', () => {
+    const options = [
+      { label: 'Radio1', value: '1' },
+      { label: 'Radio2', value: '2' },
+      { label: 'Radio3', value: '3', disabled: true },
+    ];
+
+    const { container, getByText, getAllByRole } = render(<RadioGroup options={options} />);
+
+    expect(getByText('Radio1')).toBeInTheDocument();
+    expect(getByText('Radio2')).toBeInTheDocument();
+    expect(getByText('Radio3')).toBeInTheDocument();
+
+    const radios = getAllByRole('radio');
+    expect(radios[2]).toBeDisabled();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support options with string values', () => {
+    const options = ['Apple', 'Banana', 'Orange'];
+
+    const { container, getByText } = render(<RadioGroup options={options} />);
+
+    expect(getByText('Apple')).toBeInTheDocument();
+    expect(getByText('Banana')).toBeInTheDocument();
+    expect(getByText('Orange')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support renderOption function', () => {
+    const options = [
+      { label: 'Radio1', value: '1' },
+      { label: 'Radio2', value: '2' },
+    ];
+
+    const renderOption = (item: any) => <span data-testid={`custom-${item.value}`}>{item.label} - Custom</span>;
+
+    const { getByTestId } = render(<RadioGroup options={options} renderOption={renderOption} />);
+
+    expect(getByTestId('custom-1')).toBeInTheDocument();
+    expect(getByTestId('custom-2')).toBeInTheDocument();
+  });
+
+  test('should support buttonVariant filled', () => {
+    const { container } = render(
+      <RadioGroup appearance="button" buttonVariant="filled">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    expect(container.querySelector('.sqi-radio-wrapper-filled')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/sqi-web/src/radio/__tests__/radio.test.tsx b/packages/sqi-web/src/radio/__tests__/radio.test.tsx
new file mode 100644
index 0000000..25e7eda
--- /dev/null
+++ b/packages/sqi-web/src/radio/__tests__/radio.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { describe, expect, test, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import Radio from '../Radio';
+import RadioGroup from '../RadioGroup';
+
+describe('Radio', () => {
+  test('should render correctly', () => {
+    const { container, getByText } = render(<Radio>Radio</Radio>);
+    expect(container).toBeInTheDocument();
+    expect(getByText('Radio')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support defaultChecked', () => {
+    const { container } = render(<Radio defaultChecked>Radio</Radio>);
+    const input = container.querySelector('input')!;
+    expect(input).toBeChecked();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support checked', () => {
+    const { container } = render(<Radio checked>Radio</Radio>);
+    const input = container.querySelector('input')!;
+    expect(input).toBeChecked();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support disabled', () => {
+    const { container } = render(<Radio disabled>Radio</Radio>);
+    const input = container.querySelector('input')!;
+    expect(input).toBeDisabled();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should trigger onChange when click', () => {
+    const handleChange = vi.fn();
+    const { container } = render(<Radio onChange={handleChange}>Radio</Radio>);
+    const input = container.querySelector('input')!;
+
+    fireEvent.click(input);
+    expect(handleChange).toBeCalled();
+    expect(input).toBeChecked();
+  });
+
+  test('should not trigger onChange when disabled', () => {
+    const handleChange = vi.fn();
+    const { container } = render(
+      <Radio onChange={handleChange} disabled>
+        Radio
+      </Radio>,
+    );
+    const input = container.querySelector('input')!;
+
+    fireEvent.click(input);
+    expect(handleChange).not.toBeCalled();
+    expect(input).not.toBeChecked();
+  });
+
+  test('should work in group', () => {
+    const handleChange = vi.fn();
+    const { container, getAllByRole } = render(
+      <RadioGroup onChange={handleChange} value="2">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const radios = getAllByRole('radio');
+    expect(radios[0]).not.toBeChecked();
+    expect(radios[1]).toBeChecked();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should trigger onChange in group', () => {
+    const handleChange = vi.fn();
+    const { container, getAllByRole } = render(
+      <RadioGroup onChange={handleChange} defaultValue="1">
+        <Radio value="1">Radio1</Radio>
+        <Radio value="2">Radio2</Radio>
+      </RadioGroup>,
+    );
+
+    const radios = getAllByRole('radio');
+    fireEvent.click(radios[1]);
+
+    expect(handleChange).toBeCalled();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should support function as children', () => {
+    const { container, getByText } = render(
+      <Radio checked>{({ checked }) => <span>{checked ? 'Checked' : 'Unchecked'}</span>}</Radio>,
+    );
+
+    expect(getByText('Checked')).toBeInTheDocument();
+    // <label> <span style='display:none;'> <input/> </span> </label>
+    expect(container.firstChild?.firstChild).toHaveStyle({ display: 'none' });
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should support button style when _IS_BUTTON_ is true', () => {
+    const { container } = render(<Radio _IS_BUTTON_>Button Radio</Radio>);
+    expect(container.querySelector('.sqi-radio-button-wrapper')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/sqi-web/src/space/__tests__/__snapshots__/space.test.tsx.snap b/packages/sqi-web/src/space/__tests__/__snapshots__/space.test.tsx.snap
new file mode 100644
index 0000000..d471d7d
--- /dev/null
+++ b/packages/sqi-web/src/space/__tests__/__snapshots__/space.test.tsx.snap
@@ -0,0 +1,308 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Space > applies correct align classes 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-start"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > applies correct direction classes 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > applies correct direction classes 2`] = `
+<div
+  class="sqi-space sqi-space-direction-vertical sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-bottom: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+    style="margin-bottom: 16px;"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > applies correct spacing for different size values 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 8px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > applies correct spacing for different size values 2`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > applies correct spacing for different size values 3`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 24px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > applies wrap class when wrap is true 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center sqi-space-wrap"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px; margin-bottom: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+    style="margin-right: 16px; margin-bottom: 16px;"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > does not apply margin to last item 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > handles array size values for horizontal and vertical spacing 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center sqi-space-wrap"
+>
+  <div
+    class="space-item"
+    style="margin-right: 10px; margin-bottom: 20px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+    style="margin-right: 10px; margin-bottom: 20px;"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > handles numeric size values 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 30px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > renders children correctly 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > renders with custom className 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center custom-class"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Space > renders with split element 1`] = `
+<div
+  class="sqi-space sqi-space-direction-horizontal sqi-space-align-center"
+>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 1
+    </div>
+  </div>
+  <span
+    class="sqi-space-item-split"
+  >
+    |
+  </span>
+  <div
+    class="space-item"
+    style="margin-right: 16px;"
+  >
+    <div>
+      Item 2
+    </div>
+  </div>
+  <span
+    class="sqi-space-item-split"
+  >
+    |
+  </span>
+  <div
+    class="space-item"
+  >
+    <div>
+      Item 3
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/sqi-web/src/space/__tests__/space.test.tsx b/packages/sqi-web/src/space/__tests__/space.test.tsx
new file mode 100644
index 0000000..61febff
--- /dev/null
+++ b/packages/sqi-web/src/space/__tests__/space.test.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Space from '..';
+
+describe('Space', () => {
+  it('renders children correctly', () => {
+    const { container } = render(
+      <Space>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(
+      <Space className="custom-class">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('applies correct direction classes', () => {
+    const { container: horizontalContainer } = render(
+      <Space direction="horizontal">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    const { container: verticalContainer } = render(
+      <Space direction="vertical">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    expect(horizontalContainer.firstChild).toHaveClass('sqi-space-direction-horizontal');
+    expect(verticalContainer.firstChild).toHaveClass('sqi-space-direction-vertical');
+    expect(horizontalContainer.firstChild).toMatchSnapshot();
+    expect(verticalContainer.firstChild).toMatchSnapshot();
+  });
+
+  it('applies correct align classes', () => {
+    const { container } = render(
+      <Space align="start">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    expect(container.firstChild).toHaveClass('sqi-space-align-start');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('applies wrap class when wrap is true', () => {
+    const { container } = render(
+      <Space wrap>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    expect(container.firstChild).toHaveClass('sqi-space-wrap');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with split element', () => {
+    const { container } = render(
+      <Space split="|">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Space>,
+    );
+
+    expect(container.querySelectorAll('.sqi-space-item-split')).toHaveLength(2);
+    expect(container.querySelectorAll('.sqi-space-item-split')[0]).toHaveTextContent('|');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('applies correct spacing for different size values', () => {
+    const { container: smContainer } = render(
+      <Space size="sm">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    const { container: mdContainer } = render(
+      <Space size="md">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    const { container: lgContainer } = render(
+      <Space size="lg">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    // Check that items have correct margin styles
+    const smItem = smContainer.querySelector('.space-item');
+    const mdItem = mdContainer.querySelector('.space-item');
+    const lgItem = lgContainer.querySelector('.space-item');
+
+    expect(smItem).toHaveStyle('margin-right: 8px');
+    expect(mdItem).toHaveStyle('margin-right: 16px');
+    expect(lgItem).toHaveStyle('margin-right: 24px');
+
+    expect(smContainer.firstChild).toMatchSnapshot();
+    expect(mdContainer.firstChild).toMatchSnapshot();
+    expect(lgContainer.firstChild).toMatchSnapshot();
+  });
+
+  it('handles numeric size values', () => {
+    const { container } = render(
+      <Space size={30}>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    const item = container.querySelector('.space-item');
+    expect(item).toHaveStyle('margin-right: 30px');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('handles array size values for horizontal and vertical spacing', () => {
+    const { container } = render(
+      <Space size={[10, 20]} wrap>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    const item = container.querySelector('.space-item');
+    expect(item).toHaveStyle('margin-right: 10px');
+    expect(item).toHaveStyle('margin-bottom: 20px');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('does not apply margin to last item', () => {
+    const { container } = render(
+      <Space>
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Space>,
+    );
+
+    const items = container.querySelectorAll('.space-item');
+    const lastItem = items[items.length - 1];
+    expect(lastItem).not.toHaveStyle('margin-right: 16px');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/sqi-web/src/switch/__tests__/__snapshots__/switch.test.tsx.snap b/packages/sqi-web/src/switch/__tests__/__snapshots__/switch.test.tsx.snap
new file mode 100644
index 0000000..bd39a26
--- /dev/null
+++ b/packages/sqi-web/src/switch/__tests__/__snapshots__/switch.test.tsx.snap
@@ -0,0 +1,308 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Switch > renders correctly 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should apply different sizes 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-sm"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should apply different sizes 2`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should apply different sizes 3`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-lg"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should handle controlled component 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should handle controlled component 2`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should handle controlled component 3`] = `
+<button
+  aria-checked="true"
+  class="sqi-switch sqi-switch-checked sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should not trigger change event when disabled 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-disabled sqi-switch-md"
+  disabled=""
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should not trigger change event when loading 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-loading sqi-switch-md"
+  disabled=""
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  >
+    <span
+      aria-label="loading"
+      class="sqi-icon sqi-icon-spin"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        fill="none"
+        focusable="false"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 2.25C6.61556 2.25 2.25 6.61556 2.25 12C2.25 17.3844 6.61556 21.75 12 21.75V19.3125C7.96142 19.3125 4.6875 16.0386 4.6875 12C4.6875 7.96142 7.96142 4.6875 12 4.6875C16.0386 4.6875 19.3125 7.96142 19.3125 12H21.75C21.75 6.61556 17.3844 2.25 12 2.25Z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should render custom loading icon when provided 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-loading sqi-switch-md"
+  disabled=""
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  >
+    <div
+      data-testid="custom-loading"
+    >
+      loading
+    </div>
+  </div>
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should render unchecked label when switch is not checked 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  >
+    OFF
+  </div>
+</button>
+`;
+
+exports[`Switch > should render with custom className 1`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md custom-class"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should render with custom labels 1`] = `
+<button
+  aria-checked="true"
+  class="sqi-switch sqi-switch-checked sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  >
+    ON
+  </div>
+</button>
+`;
+
+exports[`Switch > should render with defaultChecked 1`] = `
+<button
+  aria-checked="true"
+  class="sqi-switch sqi-switch-checked sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should toggle between checked and unchecked states 1`] = `
+<button
+  aria-checked="true"
+  class="sqi-switch sqi-switch-checked sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should toggle between checked and unchecked states 2`] = `
+<button
+  aria-checked="false"
+  class="sqi-switch sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
+
+exports[`Switch > should trigger change event when clicked 1`] = `
+<button
+  aria-checked="true"
+  class="sqi-switch sqi-switch-checked sqi-switch-md"
+  role="switch"
+  type="button"
+>
+  <div
+    class="sqi-switch-handle"
+  />
+  <div
+    class="sqi-switch-content"
+  />
+</button>
+`;
diff --git a/packages/sqi-web/src/switch/__tests__/switch.test.tsx b/packages/sqi-web/src/switch/__tests__/switch.test.tsx
new file mode 100644
index 0000000..39d79d7
--- /dev/null
+++ b/packages/sqi-web/src/switch/__tests__/switch.test.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Switch from '../Switch';
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Switch />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render with defaultChecked', () => {
+    const { container } = render(<Switch defaultChecked />);
+
+    expect(container.firstChild).toHaveClass('sqi-switch-checked');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render with custom labels', () => {
+    const { container } = render(<Switch label={['ON', 'OFF']} defaultChecked />);
+
+    expect(container.firstChild).toHaveTextContent('ON');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should trigger change event when clicked', () => {
+    const handleChange = vi.fn();
+    const { container } = render(<Switch onChange={handleChange} />);
+
+    fireEvent.click(container.firstChild!);
+    expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+    expect(container.firstChild).toHaveClass('sqi-switch-checked');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should not trigger change event when disabled', () => {
+    const handleChange = vi.fn();
+    const { container } = render(<Switch disabled onChange={handleChange} />);
+
+    fireEvent.click(container.firstChild!);
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(container.firstChild).toHaveClass('sqi-switch-disabled');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should not trigger change event when loading', () => {
+    const handleChange = vi.fn();
+    const { container } = render(<Switch loading onChange={handleChange} />);
+
+    fireEvent.click(container.firstChild!);
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(container.firstChild).toHaveClass('sqi-switch-loading');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should toggle between checked and unchecked states', () => {
+    const handleChange = vi.fn();
+    const { container } = render(<Switch onChange={handleChange} />);
+
+    // First click - should be checked
+    fireEvent.click(container.firstChild!);
+    expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+    expect(container.firstChild).toMatchSnapshot();
+
+    // Second click - should be unchecked
+    fireEvent.click(container.firstChild!);
+    expect(handleChange).toHaveBeenCalledWith(false, expect.any(Object));
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render custom loading icon when provided', () => {
+    const { container } = render(<Switch loading loadingIcon={<div data-testid="custom-loading">loading</div>} />);
+
+    expect(container.querySelector('[data-testid="custom-loading"]')).toBeTruthy();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should apply different sizes', () => {
+    const { container: smContainer } = render(<Switch size="sm" />);
+    const { container: mdContainer } = render(<Switch size="md" />);
+    const { container: lgContainer } = render(<Switch size="lg" />);
+
+    expect(smContainer.firstChild).toHaveClass('sqi-switch-sm');
+    expect(smContainer.firstChild).toMatchSnapshot();
+
+    expect(mdContainer.firstChild).toHaveClass('sqi-switch-md');
+    expect(mdContainer.firstChild).toMatchSnapshot();
+
+    expect(lgContainer.firstChild).toHaveClass('sqi-switch-lg');
+    expect(lgContainer.firstChild).toMatchSnapshot();
+  });
+
+  it('should handle controlled component', () => {
+    const handleChange = vi.fn();
+    const { container, rerender } = render(<Switch checked={false} onChange={handleChange} />);
+
+    expect(container.firstChild).not.toHaveClass('sqi-switch-checked');
+    expect(container.firstChild).toMatchSnapshot();
+
+    // Click should call onChange but not change state by itself
+    fireEvent.click(container.firstChild!);
+    expect(handleChange).toHaveBeenCalledWith(true, expect.any(Object));
+    expect(container.firstChild).toMatchSnapshot();
+
+    // Only when the checked prop changes, the component updates
+    rerender(<Switch checked={true} onChange={handleChange} />);
+    expect(container.firstChild).toHaveClass('sqi-switch-checked');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render with custom className', () => {
+    const { container } = render(<Switch className="custom-class" />);
+
+    expect(container.firstChild).toHaveClass('custom-class');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render unchecked label when switch is not checked', () => {
+    const { container } = render(<Switch label={['ON', 'OFF']} defaultChecked={false} />);
+
+    expect(container.firstChild).toHaveTextContent('OFF');
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/sqi-web/src/tooltip/Tooltip.tsx b/packages/sqi-web/src/tooltip/Tooltip.tsx
index a98de16..634dcaf 100644
--- a/packages/sqi-web/src/tooltip/Tooltip.tsx
+++ b/packages/sqi-web/src/tooltip/Tooltip.tsx
@@ -18,13 +18,21 @@ const defaultProps: TooltipProps = {
 const Tooltip = forwardRef<HTMLElement, TooltipProps>((baseProps, ref) => {
   const { prefixCls, componentConfig } = useContext(ConfigContext);
 
-  const { classNames, theme, ...restProps } = useMergeProps(baseProps, defaultProps, componentConfig?.Tooltip);
+  const { classNames, rootClassName, theme, ...restProps } = useMergeProps(
+    baseProps,
+    defaultProps,
+    componentConfig?.Tooltip,
+  );
 
   return (
     <Popup
-      rootClassName={clsx(`${prefixCls}-tooltip`, {
-        [`${prefixCls}-tooltip-${theme}`]: theme,
-      })}
+      rootClassName={clsx(
+        `${prefixCls}-tooltip`,
+        {
+          [`${prefixCls}-tooltip-${theme}`]: theme,
+        },
+        rootClassName,
+      )}
       classNames={{
         arrow: clsx(classNames?.arrow, `${prefixCls}-tooltip-arrow`),
         content: clsx(classNames?.content, `${prefixCls}-tooltip-content`),
diff --git a/packages/sqi-web/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap b/packages/sqi-web/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
new file mode 100644
index 0000000..d550361
--- /dev/null
+++ b/packages/sqi-web/src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
@@ -0,0 +1,148 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tooltip > renders with custom arrow and content className 1`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-default"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow custom-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content custom-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
+
+exports[`Tooltip > renders with different themes 1`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-default"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
+
+exports[`Tooltip > renders with different themes 2`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-primary"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
+
+exports[`Tooltip > renders with different themes 3`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-success"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
+
+exports[`Tooltip > renders with different themes 4`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-danger"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
+
+exports[`Tooltip > renders with different themes 5`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-warning"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
+
+exports[`Tooltip > renders with different themes 6`] = `
+<div
+  class="sqi-popup-motion sqi-popup-motion-preEnter sqi-popup sqi-tooltip sqi-tooltip-light"
+  role="tooltip"
+  style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+>
+  <div
+    style="position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; margin: 0px; will-change: transform; z-index: 1;"
+  >
+    <div
+      class="sqi-popup-arrow sqi-tooltip-arrow"
+    />
+  </div>
+  <div
+    class="sqi-popup-content sqi-tooltip-content"
+  >
+    This is a tooltip
+  </div>
+</div>
+`;
diff --git a/packages/sqi-web/src/tooltip/__tests__/tooltip.test.tsx b/packages/sqi-web/src/tooltip/__tests__/tooltip.test.tsx
new file mode 100644
index 0000000..f537c7b
--- /dev/null
+++ b/packages/sqi-web/src/tooltip/__tests__/tooltip.test.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Tooltip from '../Tooltip';
+import type { TooltipProps } from '../type';
+
+describe('Tooltip', () => {
+  it('renders with different themes', async () => {
+    const themes: TooltipProps['theme'][] = ['default', 'primary', 'success', 'danger', 'warning', 'light'];
+
+    for (const theme of themes) {
+      const { queryByText, unmount } = render(
+        <Tooltip defaultVisible theme={theme} content="This is a tooltip">
+          <button type="button">Hover me</button>
+        </Tooltip>,
+      );
+
+      await waitFor(() => {
+        const contentEl = queryByText('This is a tooltip');
+        expect(contentEl?.parentNode).toHaveClass(`sqi-tooltip-${theme}`);
+        expect(contentEl?.parentNode).toMatchSnapshot();
+      });
+      unmount();
+    }
+  });
+
+  it('renders with rootClassName', async () => {
+    const { queryByText } = render(
+      <Tooltip defaultVisible content="This is a tooltip" rootClassName="custom-tooltip">
+        <button type="button">Hover me</button>
+      </Tooltip>,
+    );
+
+    await waitFor(() => {
+      const contentEl = queryByText('This is a tooltip');
+      expect(contentEl?.parentNode).toHaveClass('sqi-tooltip');
+      expect(contentEl?.parentNode).toHaveClass('custom-tooltip');
+    });
+  });
+
+  it('renders with custom arrow and content className', async () => {
+    const { queryByText } = render(
+      <Tooltip
+        defaultVisible
+        content="This is a tooltip"
+        classNames={{
+          arrow: 'custom-arrow',
+          content: 'custom-content',
+        }}
+      >
+        <button type="button">Hover me</button>
+      </Tooltip>,
+    );
+
+    await waitFor(() => {
+      const contentEl = queryByText('This is a tooltip');
+      const arrowEl = document.querySelector('.sqi-popup-arrow');
+
+      expect(contentEl).toHaveClass('custom-content');
+      expect(arrowEl).toHaveClass('custom-arrow');
+
+      expect(contentEl?.parentNode).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/sqi-web/src/tooltip/type.ts b/packages/sqi-web/src/tooltip/type.ts
index cca832d..3b66465 100644
--- a/packages/sqi-web/src/tooltip/type.ts
+++ b/packages/sqi-web/src/tooltip/type.ts
@@ -1,6 +1,6 @@
 import type { PopupProps } from '../popup';
 
-export interface TooltipProps extends Omit<PopupProps, 'rootClassName'> {
+export interface TooltipProps extends PopupProps {
   /**
    * @description 文字提示风格
    * @default default
diff --git a/packages/sqi-web/src/trigger/__tests__/trigger.test.tsx b/packages/sqi-web/src/trigger/__tests__/trigger.test.tsx
new file mode 100644
index 0000000..8b46704
--- /dev/null
+++ b/packages/sqi-web/src/trigger/__tests__/trigger.test.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Trigger from '../Trigger';
+import type { TriggerPlacement } from '../type';
+
+describe('Trigger', () => {
+  it('should render correctly with hover trigger', async () => {
+    const { queryByTestId, getByRole } = render(
+      <Trigger
+        popper={<div data-testid="popper-content">Popper content</div>}
+        motion={{ mountOnEnter: true, unmountOnExit: true }}
+      >
+        <button type="button">Hover me</button>
+      </Trigger>,
+    );
+
+    const trigger = getByRole('button', { name: /hover me/i });
+    fireEvent.mouseEnter(trigger);
+
+    await waitFor(() => {
+      expect(queryByTestId('popper-content')).toBeInTheDocument();
+    });
+  });
+
+  it('should render correctly with click trigger', async () => {
+    const { getByRole, queryByTestId } = render(
+      <Trigger
+        trigger="click"
+        popper={<div data-testid="popper-content">Popper content</div>}
+        motion={{ mountOnEnter: true, unmountOnExit: true }}
+      >
+        <button type="button">Click me</button>
+      </Trigger>,
+    );
+
+    expect(queryByTestId('popper-content')).toBeNull();
+
+    const trigger = getByRole('button', { name: /click me/i });
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(queryByTestId('popper-content')).toBeInTheDocument();
+    });
+  });
+
+  it('shows popper content when input is focused', async () => {
+    const { getByPlaceholderText, queryByTestId } = render(
+      <Trigger
+        trigger="focus"
+        popper={<div data-testid="popper-content">Popper content</div>}
+        motion={{ mountOnEnter: true, unmountOnExit: true }}
+      >
+        <input placeholder="Focus me" />
+      </Trigger>,
+    );
+
+    expect(queryByTestId('popper-content')).toBeNull();
+
+    const input = getByPlaceholderText('Focus me');
+    fireEvent.focus(input);
+
+    await waitFor(() => {
+      expect(queryByTestId('popper-content')).toBeInTheDocument();
+    });
+  });
+
+  it('should support different placements', async () => {
+    const placements: TriggerPlacement[] = ['top', 'right', 'bottom', 'left'];
+
+    for (const placement of placements) {
+      const { queryByTestId } = render(
+        <Trigger
+          placement={placement}
+          defaultVisible
+          popper={<div data-testid={`popper-${placement}`}>Popper content</div>}
+          motion={{ initialEntered: true }}
+        >
+          <button type="button">Trigger</button>
+        </Trigger>,
+      );
+
+      await waitFor(() => {
+        const popperEl = queryByTestId(`popper-${placement}`);
+        expect(popperEl).toBeInTheDocument();
+      });
+
+      const tooltipEl = document.querySelector('[role="tooltip"]');
+      expect(tooltipEl).toHaveStyle('position: absolute');
+    }
+  });
+
+  it('should support arrow element', async () => {
+    const { queryByTestId } = render(
+      <Trigger
+        defaultVisible
+        arrow={<div data-testid="arrow-element" style={{ width: 12, height: 12 }} />}
+        popper={<div data-testid="popper-content">Popper content</div>}
+        motion={{ initialEntered: true }}
+      >
+        <button type="button">Trigger</button>
+      </Trigger>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('arrow-element')).toBeInTheDocument();
+      expect(queryByTestId('popper-content')).toBeInTheDocument();
+    });
+  });
+
+  it('should not render when children is not a valid element', () => {
+    // @ts-expect-error
+    const { container } = render(<Trigger popper={<div>Popper content</div>}>This is not a valid element</Trigger>);
+
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/packages/sqi-web/vitest.config.ts b/packages/sqi-web/vitest.config.ts
index ef5c220..1704a3b 100644
--- a/packages/sqi-web/vitest.config.ts
+++ b/packages/sqi-web/vitest.config.ts
@@ -5,6 +5,7 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: './vitest.setup.ts',
     coverage: {
+      provider: 'v8',
       include: ['src/**/*.tsx'],
       exclude: ['src/**/*.test.tsx', 'src/**/demos/*'],
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f88c030..3523955 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
         specifier: ^22.18.0
         version: 22.18.0
       '@vitest/coverage-v8':
-        specifier: ^4.0.0-beta.8
-        version: 4.0.0-beta.9(vitest@4.0.0-beta.9(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))
+        specifier: ^3.2.4
+        version: 3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))
       fs-extra:
         specifier: ^11.3.1
         version: 11.3.1
@@ -60,8 +60,8 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
       vitest:
-        specifier: ^4.0.0-beta.8
-        version: 4.0.0-beta.9(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
 
   examples/with-next:
     dependencies:
@@ -3412,43 +3412,43 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@vitest/coverage-v8@4.0.0-beta.9':
-    resolution: {integrity: sha512-XODBzMIBTyfYBtbSZjkeNO4bPFkNnJ58Tmjbg2q1ptyUqsimL0K7fUPDSMZMtU4V1XXjieTBvMnQTPOIzAtptQ==}
+  '@vitest/coverage-v8@3.2.4':
+    resolution: {integrity: sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==}
     peerDependencies:
-      '@vitest/browser': 4.0.0-beta.9
-      vitest: 4.0.0-beta.9
+      '@vitest/browser': 3.2.4
+      vitest: 3.2.4
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
 
-  '@vitest/expect@4.0.0-beta.9':
-    resolution: {integrity: sha512-gt34h5GvmtHvRlhSoGUVGDgR0DHBZrGmRM5Jr2za6FcwA93weXIoBMbJmp9TwSor9FRDyzumY+INVJ0LXfXqwg==}
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/mocker@4.0.0-beta.9':
-    resolution: {integrity: sha512-HQrMUmESI9R6xkhdhSH4gpH/lDo1I3dvfqTcGM8546QaoEBK52ajdtilBWlfV0XpkhH/Evr8Pwo0iNoEcwR2AA==}
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
     peerDependencies:
       msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0-0
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
     peerDependenciesMeta:
       msw:
         optional: true
       vite:
         optional: true
 
-  '@vitest/pretty-format@4.0.0-beta.9':
-    resolution: {integrity: sha512-C3wJZcCGfzcibumKKhKPauqgxq+9+osXQK1+81yeDaJ6+gZyulw5ZMALJaH7SAIPzkKaYMtkvZJEPaNv/q5AWw==}
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/runner@4.0.0-beta.9':
-    resolution: {integrity: sha512-KAIfV8x69/jEuKjDyYhQyupoKoeOc3Gv/qZEMRa66biKdQC/a/7YJ7uuX9RklbpWhlZBT7tkGXgV/lJ+Gw0m6Q==}
+  '@vitest/runner@3.2.4':
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
 
-  '@vitest/snapshot@4.0.0-beta.9':
-    resolution: {integrity: sha512-Ok6d/dw5feoT1GFapI/4Nb/g+FZrGA9ha1mEh9qkBFUDGI9mX1bNm1Qyz43vyXu7M/1Jz2GuuMX4WebtOVgheA==}
+  '@vitest/snapshot@3.2.4':
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
 
-  '@vitest/spy@4.0.0-beta.9':
-    resolution: {integrity: sha512-uDUHqM3ANfowSvWSbU6FL70AATOdv9LReXzU+vM65VyFZ5lBM2zTNicgdmU2dpAdlI0k0SEdlB8dyv+Kp4VAqg==}
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/utils@4.0.0-beta.9':
-    resolution: {integrity: sha512-NEGPSUj7EZNeMpgBjk6nTn1Y1ApYQtjAvm3u/e/dd9qShbhF+yuNngccn9ulDZrW2F9hBdEQq7V3Dupa0zoSsg==}
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
@@ -3699,6 +3699,10 @@ packages:
   assert@1.5.1:
     resolution: {integrity: sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   assign-symbols@1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
@@ -3928,6 +3932,10 @@ packages:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
 
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -3972,8 +3980,8 @@ packages:
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
-  chai@6.0.1:
-    resolution: {integrity: sha512-/JOoU2//6p5vCXh00FpNgtlw0LjvhGttaWc+y7wpW9yjBm3ys0dI8tSKZxIOgNruz5J0RleccatSIC3uxEZP0g==}
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
   chalk@2.4.2:
@@ -3996,6 +4004,10 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
   chokidar@3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -4417,6 +4429,10 @@ packages:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
     engines: {node: '>=0.10'}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -7058,6 +7074,10 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   pbkdf2@3.1.3:
     resolution: {integrity: sha512-wfRLBZ0feWRhCIkoMB6ete7czJcnNnqRpcoWQBLqatqXXmelSRqfdDK4F3u9T2s2cXas/hQJcryI/4lAL+XTlA==}
     engines: {node: '>=0.12'}
@@ -8593,6 +8613,10 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
   text-decoder@1.2.3:
     resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
 
@@ -8642,6 +8666,10 @@ packages:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@4.0.3:
+    resolution: {integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==}
+    engines: {node: '>=14.0.0'}
+
   titleize@3.0.0:
     resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
     engines: {node: '>=12'}
@@ -9027,6 +9055,11 @@ packages:
     resolution: {integrity: sha512-0QwqXteBNXgnLCdWdvPQBX6FXRHtIH3VhJPTd5Lwn28tJXc34YqSCWUmkOvtJHBmB3gGoPtrOKk3Ts8/kEZ9aA==}
     engines: {node: '>=10.13.0'}
 
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
   vite-plugin-imp@2.4.0:
     resolution: {integrity: sha512-L/6/nvOw+MyNh4UxAlCZHsmKd5MitmHamqqAWB15sbUgVIEz/OQ8jpKr6kkQU0eA/AIe8fkCVbQBlP81ajrqWg==}
     peerDependencies:
@@ -9100,16 +9133,16 @@ packages:
       yaml:
         optional: true
 
-  vitest@4.0.0-beta.9:
-    resolution: {integrity: sha512-DDEbcetwyfXdiZjb9tAN1kD8nyamkqvfVZ/FlSGVcvjP6wfpDt1aqrZmpAgajDnW4DO1n5CYLnThOY83woPmDw==}
+  vitest@3.2.4:
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/debug': ^4.1.12
       '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 4.0.0-beta.9
-      '@vitest/ui': 4.0.0-beta.9
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -12375,60 +12408,64 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.0-beta.9(vitest@4.0.0-beta.9(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))':
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))':
     dependencies:
+      '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.0.0-beta.9
       ast-v8-to-istanbul: 0.3.4
       debug: 4.4.1
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.2.0
+      magic-string: 0.30.18
       magicast: 0.3.5
       std-env: 3.9.0
+      test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 4.0.0-beta.9(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@4.0.0-beta.9':
+  '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.2
-      '@vitest/spy': 4.0.0-beta.9
-      '@vitest/utils': 4.0.0-beta.9
-      chai: 6.0.1
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@4.0.0-beta.9(vite@7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))':
+  '@vitest/mocker@3.2.4(vite@7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))':
     dependencies:
-      '@vitest/spy': 4.0.0-beta.9
+      '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.18
     optionalDependencies:
       vite: 7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
 
-  '@vitest/pretty-format@4.0.0-beta.9':
+  '@vitest/pretty-format@3.2.4':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/runner@4.0.0-beta.9':
+  '@vitest/runner@3.2.4':
     dependencies:
-      '@vitest/utils': 4.0.0-beta.9
+      '@vitest/utils': 3.2.4
       pathe: 2.0.3
       strip-literal: 3.0.0
 
-  '@vitest/snapshot@4.0.0-beta.9':
+  '@vitest/snapshot@3.2.4':
     dependencies:
-      '@vitest/pretty-format': 4.0.0-beta.9
+      '@vitest/pretty-format': 3.2.4
       magic-string: 0.30.18
       pathe: 2.0.3
 
-  '@vitest/spy@4.0.0-beta.9': {}
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.3
 
-  '@vitest/utils@4.0.0-beta.9':
+  '@vitest/utils@3.2.4':
     dependencies:
-      '@vitest/pretty-format': 4.0.0-beta.9
+      '@vitest/pretty-format': 3.2.4
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
@@ -12732,6 +12769,8 @@ snapshots:
       object.assign: 4.1.7
       util: 0.10.4
 
+  assertion-error@2.0.1: {}
+
   assign-symbols@1.0.0: {}
 
   ast-types-flow@0.0.8: {}
@@ -13030,6 +13069,8 @@ snapshots:
 
   bytes@3.1.2: {}
 
+  cac@6.7.14: {}
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -13072,7 +13113,13 @@ snapshots:
 
   ccount@2.0.1: {}
 
-  chai@6.0.1: {}
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
 
   chalk@2.4.2:
     dependencies:
@@ -13093,6 +13140,8 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  check-error@2.1.1: {}
+
   chokidar@3.5.3:
     dependencies:
       anymatch: 3.1.3
@@ -13547,6 +13596,8 @@ snapshots:
 
   decode-uri-component@0.2.2: {}
 
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
   deep-rename-keys@0.2.1:
@@ -17022,6 +17073,8 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  pathval@2.0.1: {}
+
   pbkdf2@3.1.3:
     dependencies:
       create-hash: 1.1.3
@@ -18763,6 +18816,12 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.2
 
+  test-exclude@7.0.1:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.4.5
+      minimatch: 9.0.5
+
   text-decoder@1.2.3:
     dependencies:
       b4a: 1.6.7
@@ -18809,6 +18868,8 @@ snapshots:
 
   tinyrainbow@2.0.0: {}
 
+  tinyspy@4.0.3: {}
+
   titleize@3.0.0: {}
 
   tldts-core@6.1.86: {}
@@ -19304,6 +19365,27 @@ snapshots:
       replace-ext: 2.0.0
       teex: 1.0.1
 
+  vite-node@3.2.4(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.1
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vite-plugin-imp@2.4.0(vite@7.1.3(@types/node@24.3.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)):
     dependencies:
       '@babel/core': 7.28.3
@@ -19368,17 +19450,18 @@ snapshots:
       terser: 5.43.1
       tsx: 4.20.5
 
-  vitest@4.0.0-beta.9(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.0)(jiti@2.5.1)(jsdom@26.1.0)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5):
     dependencies:
-      '@vitest/expect': 4.0.0-beta.9
-      '@vitest/mocker': 4.0.0-beta.9(vite@7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))
-      '@vitest/pretty-format': 4.0.0-beta.9
-      '@vitest/runner': 4.0.0-beta.9
-      '@vitest/snapshot': 4.0.0-beta.9
-      '@vitest/spy': 4.0.0-beta.9
-      '@vitest/utils': 4.0.0-beta.9
+      '@types/chai': 5.2.2
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
       debug: 4.4.1
-      es-module-lexer: 1.7.0
       expect-type: 1.2.2
       magic-string: 0.30.18
       pathe: 2.0.3
@@ -19390,6 +19473,7 @@ snapshots:
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
       vite: 7.1.3(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
+      vite-node: 3.2.4(@types/node@22.18.0)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(sass-embedded@1.89.1)(sass@1.91.0)(terser@5.43.1)(tsx@4.20.5)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12