add unit tests

tests/components/Chip.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Chip } from '../../src/components/Chip';
+
+describe('Chip', () => {
+    it('renders default span with solid classes', () => {
+        render(<Chip>Default</Chip>);
+
+        const chip = screen.getByText('Default');
+        expect(chip.tagName).toBe('SPAN');
+        expect(chip.className).toContain('chip-solid');
+    });
+
+    it('supports outlined variant with valid tone', () => {
+        render(
+            <Chip as="div" variant="outlined" tone="indigo-700">
+                Custom
+            </Chip>,
+        );
+
+        const chip = screen.getByText('Custom');
+        expect(chip.tagName).toBe('DIV');
+        expect(chip.className).toContain('chip-outlined');
+        expect(chip).toHaveStyle({
+            borderColor: 'rgb(67, 56, 202)',
+            color: 'rgb(67, 56, 202)',
+        });
+    });
+
+    it('supports direct tone tokens without shades for solid variant', () => {
+        render(<Chip tone="white">Solid</Chip>);
+
+        expect(screen.getByText('Solid')).toHaveStyle({
+            borderColor: 'rgb(255, 255, 255)',
+            backgroundColor: 'rgb(255, 255, 255)',
+            color: 'rgb(255, 255, 255)',
+        });
+    });
+
+    it('ignores invalid/empty tones and keeps className', () => {
+        const { rerender } = render(
+            <Chip tone="not-a-token" className="chip-custom">
+                Invalid
+            </Chip>,
+        );
+
+        const invalid = screen.getByText('Invalid');
+        expect(invalid).toHaveClass('chip-custom');
+        expect(invalid.getAttribute('style')).toBeNull();
+
+        rerender(<Chip tone="   ">Blank</Chip>);
+        expect(screen.getByText('Blank').getAttribute('style')).toBeNull();
+    });
+});