shared-design-system 1.3.0 → 1.5.0

package/README.md

@@ -1,258 +1,258 @@
-# Shared Design System
-
-Bộ thư viện thành phần giao diện dùng chung (Common Components) dành cho kiến trúc Microfrontend Portal.
-
-> **v1.4.0** — Toàn bộ 21 component đã được migrate sang **TypeScript** với strict prop interfaces và full IntelliSense support.
-
-## 🚀 Cài đặt
-
-Thư viện này được quản lý như một package nội bộ trong monorepo. Các MFE có thể sử dụng bằng cách import trực tiếp:
-
-```typescript
-// Import component + type
-import { Button, type ButtonProps } from '@tonght3/shared-design-system';
-import { Card, Badge, tokens } from '@tonght3/shared-design-system';
-```
-
-## 🎨 Design Tokens
-
-Thư viện sử dụng hệ thống Design Tokens tập trung tại `src/tokens.ts`. Bạn nên sử dụng các token này thay vì mã màu hardcode để đảm bảo tính nhất quán.
-
-```typescript
-import { tokens, type DesignTokens } from '@tonght3/shared-design-system';
-
-const myStyle = {
-  color: tokens.color.primary,
-  padding: tokens.spacing['4'],
-  borderRadius: tokens.radius.md
-};
-```
-
-## 🧱 Các thành phần chính
-
-### 1. Button
-Thành phần nút bấm đa năng với các biến thể: `primary`, `secondary`, `danger`, `ghost`.
-
-```jsx
-<Button variant="primary" onClick={handleClick}>Xác nhận</Button>
-<Button variant="ghost" size="sm">Hủy</Button>
-```
-
-### 2. Badge
-Dùng để hiển thị trạng thái hoặc nhãn dán. Các variant: `success`, `warning`, `danger`, `info`, `slate`.
-
-```jsx
-<Badge variant="success">Hoàn thành</Badge>
-<Badge variant="warning">Chờ duyệt</Badge>
-```
-
-### 3. Form Components
-Bộ công cụ nhập liệu đồng bộ: `Input`, `Textarea`, `Select`, `Checkbox`.
-
-```jsx
-<Input label="Họ và tên" placeholder="Nhập tên..." required />
-<Select label="Phòng ban">
-  <option value="IT">Công nghệ thông tin</option>
-  <option value="HR">Nhân sự</option>
-</Select>
-```
-
-### 4. Card
-Thành phần container dùng để nhóm nội dung. Hỗ trợ `title`, `subtitle` và `footer`.
-
-```jsx
-<Card title="Thông tin cá nhân" subtitle="Chi tiết hồ sơ nhân viên">
-  <Text>Thông tin bên trong card...</Text>
-</Card>
-```
-
-### 5. Typography
-Enforce font types và hierarchy: `Heading`, `Text`, `SectionHeader`.
-
-```jsx
-<Heading level={2}>Tiêu đề lớn</Heading>
-<Text size="sm" color="muted">Ghi chú nhỏ</Text>
-<SectionHeader title="Thông tin nghiệp vụ" />
-```
-
-### 6. ReadOnlyField
-Sử dụng trong các màn hình chi tiết để hiển thị dữ liệu ở chế độ chỉ đọc một cách chuyên nghiệp.
-
-```jsx
-<ReadOnlyField label="Mã yêu cầu" value="RQ-2024-001" />
-```
-
-### 7. LoadingSpinner
-Animation quay đều sử dụng màu thương hiệu để biểu thị trạng thái đang tải.
-
-```jsx
-<LoadingSpinner size="md" />
-```
-
----
-
-## 🌟 Thành phần nâng cao (Phase 2 - Cảm hứng từ MUI)
-
-### 8. Avatar
-Hiển thị ảnh đại diện hoặc chữ cái đầu. Hỗ trợ nhiều kích thước (`xs` đến `xl`) và hình dạng (`circle`, `rounded`, `square`).
-
-```jsx
-<Avatar src="/path/to/img.jpg" size="lg" />
-<Avatar variant="rounded">JD</Avatar>
-```
-
-### 9. Switch
-Nút gạt bật/tắt hiện đại thay thế cho Checkbox.
-
-```jsx
-<Switch checked={isActive} onChange={toggle} label="Kích hoạt tính năng" />
-```
-
-### 10. Tabs & Tab
-Hệ thống chuyển đổi nội dung dạng tab. Hỗ trợ variant `standard` và `pills`.
-
-```jsx
-<Tabs value={tabIndex} onChange={setTabIndex}>
-  <Tab value={0} label="Tổng quan" icon={<HomeIcon />} />
-  <Tab value={1} label="Lịch sử" />
-</Tabs>
-```
-
-### 11. Breadcrumbs
-Định vị vị trí trong cấu trúc trang.
-
-```jsx
-<Breadcrumbs items={[
-  { label: 'Trang chủ', onClick: goHome },
-  { label: 'Cài đặt', onClick: goSettings },
-  { label: 'Thông tin cá nhân' }
-]} />
-```
-
-### 12. Skeleton
-Hiệu ứng placeholder khi đang tải dữ liệu.
-
-```jsx
-<Skeleton variant="circle" width="40px" height="40px" />
-<Skeleton variant="rectangular" height="200px" />
-<Skeleton variant="text" width="60%" />
-```
-
-### 13. Tooltip
-Hiển thị chú thích khi di chuột. Hỗ trợ 4 hướng: `top`, `bottom`, `left`, `right`.
-
-```jsx
-<Tooltip title="Xóa bản ghi này" position="top">
-  <Button variant="danger">Xóa</Button>
-</Tooltip>
-```
-
-### 14. Divider
-Đường kẻ phân tách nội dung.
-
-```jsx
-<Divider orientation="horizontal" margin="lg" />
-```
-
----
-
-## 🚀 Tính năng mở rộng (Phase 3 - Robust System)
-
-### 15. Stack
-Công cụ quản lý bố cục và khoảng cách tự động.
-
-```jsx
-<Stack direction="row" spacing="md" align="center">
-  <Button>Lưu</Button>
-  <Button variant="ghost">Hủy</Button>
-</Stack>
-```
-
-### 16. Alert
-Thanh thông báo theo mức độ nghiêm trọng: `success`, `info`, `warning`, `error`.
-
-```jsx
-<Alert severity="success" title="Thành công">Dữ liệu đã được lưu.</Alert>
-<Alert severity="error">Có lỗi xảy ra, vui lòng thử lại.</Alert>
-```
-
-### 17. Tag/Chip
-Nhãn dán cho dữ liệu, hỗ trợ nút đóng (close).
-
-```jsx
-<Tag color="primary" variant="solid">Mới</Tag>
-<Tag color="danger" onClose={handleDelete}>Hết hạn</Tag>
-```
-
-### 18. Progress
-Thanh tiến trình dạng đường thẳng (Linear Progress).
-
-```jsx
-<Progress value={75} showLabel color="success" />
-```
-
-### 19. Steps
-Thanh điều hướng quy trình (Workflow). Hỗ trợ chiều dọc và chiều ngang.
-
-```jsx
-<Steps 
-  current={1} 
-  items={[
-    { title: 'Khởi tạo', description: 'User gửi yêu cầu' },
-    { title: 'Phê duyệt', description: 'Đang chờ quản lý' },
-    { title: 'Hoàn tất' }
-  ]} 
-/>
-```
-
-### 20. Table (Styled)
-Bộ thành phần xây dựng bảng dữ liệu chuyên nghiệp.
-
-```jsx
-<TableContainer>
-  <THead>
-    <TR>
-      <TH>Họ Tên</TH>
-      <TH>Trạng Thái</TH>
-    </TR>
-  </THead>
-  <TBody>
-    <TR>
-      <TD>Nguyễn Văn A</TD>
-      <TD><Badge variant="success">Active</Badge></TD>
-    </TR>
-  </TBody>
-</TableContainer>
-```
-
-### 21. Radio & RadioGroup
-Lựa chọn duy nhất trong danh sách.
-
-```jsx
-<RadioGroup direction="row">
-  <Radio name="gender" value="male" label="Nam" checked />
-  <Radio name="gender" value="female" label="Nữ" />
-</RadioGroup>
-```
-
-## 🛠 Nguyên tắc phát triển
-
-1. **Tokens First**: Luôn kiểm tra `src/tokens.ts` trước khi thêm giá trị mới.
-2. **Stateless**: Giữ component đơn giản nhất có thể, chỉ xử lý UI và nhận data qua props.
-3. **Prefixing**: Khi kết hợp với Tailwind trong từng MFE, hãy sử dụng prefix tương ứng của MFE đó để tránh xung đột style với Portal.
-4. **Type-safe**: Mỗi component có Props interface riêng. Luôn import type khi chỉ cần dùng cho annotation.
-
-## 📦 Build & Publish
-
-```bash
-# Type-check
-npm run typecheck
-
-# Build ra dist/ (tự động chạy khi publish)
-npm run build
-
-# Publish (tự động chạy typecheck + build trước)
-npm publish
-```
-
-> **Lưu ý:** File `dist/` được generate tự động, không commit vào git.
+# Shared Design System
+
+Bộ thư viện thành phần giao diện dùng chung (Common Components) dành cho kiến trúc Microfrontend Portal.
+
+> **v1.4.0** — Toàn bộ 21 component đã được migrate sang **TypeScript** với strict prop interfaces và full IntelliSense support.
+
+## 🚀 Cài đặt
+
+Thư viện này được quản lý như một package nội bộ trong monorepo. Các MFE có thể sử dụng bằng cách import trực tiếp:
+
+```typescript
+// Import component + type
+import { Button, type ButtonProps } from 'shared-design-system';
+import { Card, Badge, tokens } from 'shared-design-system';
+```
+
+## 🎨 Design Tokens
+
+Thư viện sử dụng hệ thống Design Tokens tập trung tại `src/tokens.ts`. Bạn nên sử dụng các token này thay vì mã màu hardcode để đảm bảo tính nhất quán.
+
+```typescript
+import { tokens, type DesignTokens } from 'shared-design-system';
+
+const myStyle = {
+  color: tokens.color.primary,
+  padding: tokens.spacing['4'],
+  borderRadius: tokens.radius.md
+};
+```
+
+## 🧱 Các thành phần chính
+
+### 1. Button
+Thành phần nút bấm đa năng với các biến thể: `primary`, `secondary`, `danger`, `ghost`.
+
+```jsx
+<Button variant="primary" onClick={handleClick}>Xác nhận</Button>
+<Button variant="ghost" size="sm">Hủy</Button>
+```
+
+### 2. Badge
+Dùng để hiển thị trạng thái hoặc nhãn dán. Các variant: `success`, `warning`, `danger`, `info`, `slate`.
+
+```jsx
+<Badge variant="success">Hoàn thành</Badge>
+<Badge variant="warning">Chờ duyệt</Badge>
+```
+
+### 3. Form Components
+Bộ công cụ nhập liệu đồng bộ: `Input`, `Textarea`, `Select`, `Checkbox`.
+
+```jsx
+<Input label="Họ và tên" placeholder="Nhập tên..." required />
+<Select label="Phòng ban">
+  <option value="IT">Công nghệ thông tin</option>
+  <option value="HR">Nhân sự</option>
+</Select>
+```
+
+### 4. Card
+Thành phần container dùng để nhóm nội dung. Hỗ trợ `title`, `subtitle` và `footer`.
+
+```jsx
+<Card title="Thông tin cá nhân" subtitle="Chi tiết hồ sơ nhân viên">
+  <Text>Thông tin bên trong card...</Text>
+</Card>
+```
+
+### 5. Typography
+Enforce font types và hierarchy: `Heading`, `Text`, `SectionHeader`.
+
+```jsx
+<Heading level={2}>Tiêu đề lớn</Heading>
+<Text size="sm" color="muted">Ghi chú nhỏ</Text>
+<SectionHeader title="Thông tin nghiệp vụ" />
+```
+
+### 6. ReadOnlyField
+Sử dụng trong các màn hình chi tiết để hiển thị dữ liệu ở chế độ chỉ đọc một cách chuyên nghiệp.
+
+```jsx
+<ReadOnlyField label="Mã yêu cầu" value="RQ-2024-001" />
+```
+
+### 7. LoadingSpinner
+Animation quay đều sử dụng màu thương hiệu để biểu thị trạng thái đang tải.
+
+```jsx
+<LoadingSpinner size="md" />
+```
+
+---
+
+## 🌟 Thành phần nâng cao (Phase 2 - Cảm hứng từ MUI)
+
+### 8. Avatar
+Hiển thị ảnh đại diện hoặc chữ cái đầu. Hỗ trợ nhiều kích thước (`xs` đến `xl`) và hình dạng (`circle`, `rounded`, `square`).
+
+```jsx
+<Avatar src="/path/to/img.jpg" size="lg" />
+<Avatar variant="rounded">JD</Avatar>
+```
+
+### 9. Switch
+Nút gạt bật/tắt hiện đại thay thế cho Checkbox.
+
+```jsx
+<Switch checked={isActive} onChange={toggle} label="Kích hoạt tính năng" />
+```
+
+### 10. Tabs & Tab
+Hệ thống chuyển đổi nội dung dạng tab. Hỗ trợ variant `standard` và `pills`.
+
+```jsx
+<Tabs value={tabIndex} onChange={setTabIndex}>
+  <Tab value={0} label="Tổng quan" icon={<HomeIcon />} />
+  <Tab value={1} label="Lịch sử" />
+</Tabs>
+```
+
+### 11. Breadcrumbs
+Định vị vị trí trong cấu trúc trang.
+
+```jsx
+<Breadcrumbs items={[
+  { label: 'Trang chủ', onClick: goHome },
+  { label: 'Cài đặt', onClick: goSettings },
+  { label: 'Thông tin cá nhân' }
+]} />
+```
+
+### 12. Skeleton
+Hiệu ứng placeholder khi đang tải dữ liệu.
+
+```jsx
+<Skeleton variant="circle" width="40px" height="40px" />
+<Skeleton variant="rectangular" height="200px" />
+<Skeleton variant="text" width="60%" />
+```
+
+### 13. Tooltip
+Hiển thị chú thích khi di chuột. Hỗ trợ 4 hướng: `top`, `bottom`, `left`, `right`.
+
+```jsx
+<Tooltip title="Xóa bản ghi này" position="top">
+  <Button variant="danger">Xóa</Button>
+</Tooltip>
+```
+
+### 14. Divider
+Đường kẻ phân tách nội dung.
+
+```jsx
+<Divider orientation="horizontal" margin="lg" />
+```
+
+---
+
+## 🚀 Tính năng mở rộng (Phase 3 - Robust System)
+
+### 15. Stack
+Công cụ quản lý bố cục và khoảng cách tự động.
+
+```jsx
+<Stack direction="row" spacing="md" align="center">
+  <Button>Lưu</Button>
+  <Button variant="ghost">Hủy</Button>
+</Stack>
+```
+
+### 16. Alert
+Thanh thông báo theo mức độ nghiêm trọng: `success`, `info`, `warning`, `error`.
+
+```jsx
+<Alert severity="success" title="Thành công">Dữ liệu đã được lưu.</Alert>
+<Alert severity="error">Có lỗi xảy ra, vui lòng thử lại.</Alert>
+```
+
+### 17. Tag/Chip
+Nhãn dán cho dữ liệu, hỗ trợ nút đóng (close).
+
+```jsx
+<Tag color="primary" variant="solid">Mới</Tag>
+<Tag color="danger" onClose={handleDelete}>Hết hạn</Tag>
+```
+
+### 18. Progress
+Thanh tiến trình dạng đường thẳng (Linear Progress).
+
+```jsx
+<Progress value={75} showLabel color="success" />
+```
+
+### 19. Steps
+Thanh điều hướng quy trình (Workflow). Hỗ trợ chiều dọc và chiều ngang.
+
+```jsx
+<Steps 
+  current={1} 
+  items={[
+    { title: 'Khởi tạo', description: 'User gửi yêu cầu' },
+    { title: 'Phê duyệt', description: 'Đang chờ quản lý' },
+    { title: 'Hoàn tất' }
+  ]} 
+/>
+```
+
+### 20. Table (Styled)
+Bộ thành phần xây dựng bảng dữ liệu chuyên nghiệp.
+
+```jsx
+<TableContainer>
+  <THead>
+    <TR>
+      <TH>Họ Tên</TH>
+      <TH>Trạng Thái</TH>
+    </TR>
+  </THead>
+  <TBody>
+    <TR>
+      <TD>Nguyễn Văn A</TD>
+      <TD><Badge variant="success">Active</Badge></TD>
+    </TR>
+  </TBody>
+</TableContainer>
+```
+
+### 21. Radio & RadioGroup
+Lựa chọn duy nhất trong danh sách.
+
+```jsx
+<RadioGroup direction="row">
+  <Radio name="gender" value="male" label="Nam" checked />
+  <Radio name="gender" value="female" label="Nữ" />
+</RadioGroup>
+```
+
+## 🛠 Nguyên tắc phát triển
+
+1. **Tokens First**: Luôn kiểm tra `src/tokens.ts` trước khi thêm giá trị mới.
+2. **Stateless**: Giữ component đơn giản nhất có thể, chỉ xử lý UI và nhận data qua props.
+3. **Prefixing**: Khi kết hợp với Tailwind trong từng MFE, hãy sử dụng prefix tương ứng của MFE đó để tránh xung đột style với Portal.
+4. **Type-safe**: Mỗi component có Props interface riêng. Luôn import type khi chỉ cần dùng cho annotation.
+
+## 📦 Build & Publish
+
+```bash
+# Type-check
+npm run typecheck
+
+# Build ra dist/ (tự động chạy khi publish)
+npm run build
+
+# Publish (tự động chạy typecheck + build trước)
+npm publish
+```
+
+> **Lưu ý:** File `dist/` được generate tự động, không commit vào git.

package/dist/colors.d.ts

@@ -0,0 +1,71 @@
+export declare const colors: {
+    brandRed: string;
+    brandYellow: string;
+    brandGrey: string;
+    yellow5: string;
+    yellow4: string;
+    yellow3: string;
+    yellow2: string;
+    yellow1: string;
+    yellow0: string;
+    neutral5: string;
+    neutral4: string;
+    neutral3: string;
+    neutral2: string;
+    neutral1: string;
+    neutral0: string;
+    black: string;
+    white: string;
+    purple5: string;
+    purple4: string;
+    purple3: string;
+    purple2: string;
+    purple1: string;
+    orange5: string;
+    orange4: string;
+    orange3: string;
+    orange2: string;
+    orange1: string;
+    orange0: string;
+    green5: string;
+    green4: string;
+    green3: string;
+    green2: string;
+    green1: string;
+    green0: string;
+    blue5: string;
+    blue4: string;
+    blue3: string;
+    blue2: string;
+    blue1: string;
+    red5: string;
+    red4: string;
+    red3: string;
+    red2: string;
+    red1: string;
+    paper: string;
+    primaryMain: string;
+    primaryDark: string;
+    secondaryMain: string;
+    secondaryDark: string;
+    successMain: string;
+    successDark: string;
+    errorMain: string;
+    errorDark: string;
+    orangeMain: string;
+    orangeDark: string;
+    warningMain: string;
+    warningDark: string;
+    infoMain: string;
+    infoDark: string;
+    grey50: string;
+    grey100: string;
+    grey200: string;
+    grey300: string;
+    grey500: string;
+    grey600: string;
+    grey700: string;
+    grey900: string;
+    grey400: string;
+    grey800: string;
+};

package/dist/colors.js

@@ -0,0 +1,72 @@
+export const colors = {
+    brandRed: '#BE1128',
+    brandYellow: '#FFC20E',
+    brandGrey: '#464646',
+    yellow5: '#F7A30A',
+    yellow4: '#F7B512',
+    yellow3: '#FCC954',
+    yellow2: '#FFDF80',
+    yellow1: '#FFECB3',
+    yellow0: '#FFF9E5',
+    neutral5: '#212B36',
+    neutral4: '#454F5B',
+    neutral3: '#B6BEC8',
+    neutral2: '#D3D8DE',
+    neutral1: '#EAEEF2',
+    neutral0: '#F8F9FA',
+    black: '#000000',
+    white: '#ffffff',
+    purple5: '#6B1C3A',
+    purple4: '#A60066',
+    purple3: '#D10373',
+    purple2: '#FF99D8',
+    purple1: '#FFE5F5',
+    orange5: '#D4470F',
+    orange4: '#F56600',
+    orange3: '#FF993B',
+    orange2: '#FFB580',
+    orange1: '#FFD2B3',
+    orange0: '#FFF0E5',
+    green5: '#337321',
+    green4: '#4FA800',
+    green3: '#7DBA00',
+    green2: '#ABD653',
+    green1: '#D5E5B4',
+    green0: '#F2FAE2',
+    blue5: '#006FD6',
+    blue4: '#1890FF',
+    blue3: '#80C2FF',
+    blue2: '#C2E1FF',
+    blue1: '#E5F3FF',
+    red5: '#AD2624',
+    red4: '#D12421',
+    red3: '#EB2629',
+    red2: '#FCA5A6',
+    red1: '#FDE8E8',
+    paper: '#ffffff',
+    primaryMain: '#ffc20e',
+    primaryDark: '#f7a30a',
+    secondaryMain: '#eaeef2',
+    secondaryDark: '#d3d8de',
+    successMain: '#4fa800',
+    successDark: '#337321',
+    errorMain: '#d12421',
+    errorDark: '#ad2624',
+    orangeMain: '#ffab91',
+    orangeDark: '#d84315',
+    warningMain: '#f56600',
+    warningDark: '#d4470f',
+    infoMain: '#1890ff',
+    infoDark: '#006fd6',
+    grey50: '#fafafa',
+    grey100: '#f5f5f5',
+    grey200: '#f8f9fa',
+    grey300: '#eaeef2',
+    grey500: '#d3d8de',
+    grey600: '#b6bec8',
+    grey700: '#454f5b',
+    grey900: '#212b36',
+    grey400: '#bdbdbd',
+    grey800: '#7B7B7B'
+};
+//# sourceMappingURL=colors.js.map

package/dist/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IAEpB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IAEnB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IAEjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IAEf,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACrB,CAAC"}

package/dist/components/ConfirmModal.js

@@ -43,11 +43,11 @@ export const ConfirmModal = ({ isOpen, title, message, confirmText = 'Xác nhậ
                             display: 'flex',
                             justifyContent: 'flex-end',
                             gap: tokens.spacing[3]
-                        }, children: [_jsx(Button, { variant: "ghost", onClick: onCancel, children: cancelText }), _jsx(Button, { variant: variant, onClick: onConfirm, children: confirmText })] })] }), _jsx("style", { children: `
-        @keyframes ds-fade-in {
-          from { opacity: 0; transform: scale(0.95); }
-          to { opacity: 1; transform: scale(1); }
-        }
+                        }, children: [_jsx(Button, { variant: "ghost", onClick: onCancel, children: cancelText }), _jsx(Button, { variant: variant, onClick: onConfirm, children: confirmText })] })] }), _jsx("style", { children: `
+        @keyframes ds-fade-in {
+          from { opacity: 0; transform: scale(0.95); }
+          to { opacity: 1; transform: scale(1); }
+        }
       ` })] }));
 };
 //# sourceMappingURL=ConfirmModal.js.map

package/dist/components/LoadingSpinner.js

@@ -12,10 +12,10 @@ export const LoadingSpinner = ({ size = 'md', color = 'primary', className = ''
     const getStrokeWidth = () => size === 'sm' ? '3' : '4';
     const getColor = () => color === 'white' ? '#FFFFFF' : tokens.color.primary;
     const dims = getDims();
-    return (_jsx("div", { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, className: className, children: _jsxs("svg", { width: dims, height: dims, viewBox: "0 0 50 50", style: { animation: 'ds-spin 1s linear infinite' }, children: [_jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: getColor(), strokeWidth: getStrokeWidth(), strokeDasharray: "90, 150", strokeLinecap: "round", style: { opacity: 1 } }), _jsx("style", { children: `
-          @keyframes ds-spin {
-            100% { transform: rotate(360deg); }
-          }
+    return (_jsx("div", { style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, className: className, children: _jsxs("svg", { width: dims, height: dims, viewBox: "0 0 50 50", style: { animation: 'ds-spin 1s linear infinite' }, children: [_jsx("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: getColor(), strokeWidth: getStrokeWidth(), strokeDasharray: "90, 150", strokeLinecap: "round", style: { opacity: 1 } }), _jsx("style", { children: `
+          @keyframes ds-spin {
+            100% { transform: rotate(360deg); }
+          }
         ` })] }) }));
 };
 //# sourceMappingURL=LoadingSpinner.js.map

package/dist/components/Skeleton.js

@@ -17,12 +17,12 @@ export const Skeleton = ({ variant = 'text', width, height, className = '', styl
             overflow: 'hidden',
             animation: 'ds-pulse 1.5s ease-in-out infinite',
             ...style
-        }, className: className, children: _jsx("style", { children: `
-        @keyframes ds-pulse {
-          0% { opacity: 1; }
-          50% { opacity: 0.4; }
-          100% { opacity: 1; }
-        }
+        }, className: className, children: _jsx("style", { children: `
+        @keyframes ds-pulse {
+          0% { opacity: 1; }
+          50% { opacity: 0.4; }
+          100% { opacity: 1; }
+        }
       ` }) }));
 };
 //# sourceMappingURL=Skeleton.js.map

package/dist/index.d.ts

@@ -44,5 +44,6 @@ export { Radio, RadioGroup } from './components/Radio';
 export type { RadioProps, RadioGroupProps } from './components/Radio';
 export { Steps } from './components/Steps';
 export type { StepsProps, StepItem, StepStatus } from './components/Steps';
+export { colors } from './colors';
 export { tokens } from './tokens';
 export type { DesignTokens, ColorTokens, RadiusTokens, ShadowTokens, FontTokens, SpacingTokens, TransitionTokens } from './tokens';

package/dist/index.js

@@ -25,5 +25,6 @@ export { TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
 export { Radio, RadioGroup } from './components/Radio';
 export { Steps } from './components/Steps';
 // ─── Design Tokens ────────────────────────────────────────────────────────────
+export { colors } from './colors';
 export { tokens } from './tokens';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGjF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,iFAAiF;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAG9E,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGjF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,iFAAiF;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAG9E,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/package.json

@@ -1,52 +1,52 @@
-{
-  "name": "shared-design-system",
-  "version": "1.3.0",
-  "description": "Shared Tailwind Design System & UI Tokens for all Micro Frontends",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./tokens": {
-      "import": "./dist/tokens.js",
-      "require": "./dist/tokens.js",
-      "types": "./dist/tokens.d.ts"
-    },
-    "./tailwind.preset": {
-      "require": "./tailwind.preset.js",
-      "import": "./tailwind.preset.js"
-    },
-    "./tailwind.preset.js": {
-      "require": "./tailwind.preset.js",
-      "import": "./tailwind.preset.js"
-    }
-  },
-  "files": [
-    "dist",
-    "tailwind.preset.js",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "tsc --project tsconfig.build.json",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run typecheck && npm run build"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tailwindcss": "^3.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.4.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/node": "^20.11.0"
-  }
-}
+{
+  "name": "shared-design-system",
+  "version": "1.5.0",
+  "description": "Shared Tailwind Design System & UI Tokens for all Micro Frontends",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens": {
+      "import": "./dist/tokens.js",
+      "require": "./dist/tokens.js",
+      "types": "./dist/tokens.d.ts"
+    },
+    "./tailwind.preset": {
+      "require": "./tailwind.preset.js",
+      "import": "./tailwind.preset.js"
+    },
+    "./tailwind.preset.js": {
+      "require": "./tailwind.preset.js",
+      "import": "./tailwind.preset.js"
+    }
+  },
+  "files": [
+    "dist",
+    "tailwind.preset.js",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/node": "^20.11.0"
+  }
+}

package/tailwind.preset.js

@@ -4,11 +4,80 @@ module.exports = {
     extend: {
       colors: {
         // Ánh xạ sang biến CSS Variable (Có giá trị fallback)
-        primary: 'var(--theme-color-primary, #0f172a)',
-        secondary: 'var(--theme-color-secondary, #64748b)',
+        primary: 'var(--theme-color-primary, #ffc20e)',
+        secondary: 'var(--theme-color-secondary, #eaeef2)',
+        brandRed: '#BE1128',
+        brandYellow: '#FFC20E',
+        brandGrey: '#464646',
+        yellow5: '#F7A30A',
+        yellow4: '#F7B512',
+        yellow3: '#FCC954',
+        yellow2: '#FFDF80',
+        yellow1: '#FFECB3',
+        yellow0: '#FFF9E5',
+        neutral5: '#212B36',
+        neutral4: '#454F5B',
+        neutral3: '#B6BEC8',
+        neutral2: '#D3D8DE',
+        neutral1: '#EAEEF2',
+        neutral0: '#F8F9FA',
+        black: '#000000',
+        white: '#ffffff',
+        purple5: '#6B1C3A',
+        purple4: '#A60066',
+        purple3: '#D10373',
+        purple2: '#FF99D8',
+        purple1: '#FFE5F5',
+        orange5: '#D4470F',
+        orange4: '#F56600',
+        orange3: '#FF993B',
+        orange2: '#FFB580',
+        orange1: '#FFD2B3',
+        orange0: '#FFF0E5',
+        green5: '#337321',
+        green4: '#4FA800',
+        green3: '#7DBA00',
+        green2: '#ABD653',
+        green1: '#D5E5B4',
+        green0: '#F2FAE2',
+        blue5: '#006FD6',
+        blue4: '#1890FF',
+        blue3: '#80C2FF',
+        blue2: '#C2E1FF',
+        blue1: '#E5F3FF',
+        red5: '#AD2624',
+        red4: '#D12421',
+        red3: '#EB2629',
+        red2: '#FCA5A6',
+        red1: '#FDE8E8',
+        paper: '#ffffff',
+        primaryMain: '#ffc20e',
+        primaryDark: '#f7a30a',
+        secondaryMain: '#eaeef2',
+        secondaryDark: '#d3d8de',
+        successMain: '#4fa800',
+        successDark: '#337321',
+        errorMain: '#d12421',
+        errorDark: '#ad2624',
+        orangeMain: '#ffab91',
+        orangeDark: '#d84315',
+        warningMain: '#f56600',
+        warningDark: '#d4470f',
+        infoMain: '#1890ff',
+        infoDark: '#006fd6',
+        grey50: '#fafafa',
+        grey100: '#f5f5f5',
+        grey200: '#f8f9fa',
+        grey300: '#eaeef2',
+        grey500: '#d3d8de',
+        grey600: '#b6bec8',
+        grey700: '#454f5b',
+        grey900: '#212b36',
+        grey400: '#bdbdbd',
+        grey800: '#7B7B7B',
         brand: {
-          50: '#f0fdf4',
-          500: '#22c55e',
+          50: '#FFF9E5',
+          500: '#FFC20E',
         }
       },
       fontFamily: {