feat(web): add shared primitive components — TEC-3063

Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table),
KpiCard, usePreferencesStore — all exported from design-system/index.ts.
47 unit tests passing.

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/design-system/__tests__/empty-state.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { EmptyState } from '../empty-state';
+
+describe('EmptyState', () => {
+  it('renders title', () => {
+    render(<EmptyState title="Không có dữ liệu" />);
+    expect(screen.getByText('Không có dữ liệu')).toBeInTheDocument();
+  });
+
+  it('renders description when provided', () => {
+    render(<EmptyState title="Empty" description="Hãy thêm dữ liệu mới" />);
+    expect(screen.getByText('Hãy thêm dữ liệu mới')).toBeInTheDocument();
+  });
+
+  it('does not render description when not provided', () => {
+    render(<EmptyState title="Empty" />);
+    expect(screen.queryByText(/Hãy/)).not.toBeInTheDocument();
+  });
+
+  it('renders icon when provided', () => {
+    render(<EmptyState title="Empty" icon={<span data-testid="icon">X</span>} />);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders action when provided', () => {
+    render(<EmptyState title="Empty" action={<button>Thêm mới</button>} />);
+    expect(screen.getByRole('button', { name: 'Thêm mới' })).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<EmptyState title="X" className="my-class" />);
+    expect((container.firstChild as HTMLElement)).toHaveClass('my-class');
+  });
+});