shared-design-system 1.6.0 → 1.9.0

package/README.md

@@ -1,258 +1,184 @@
-# 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.
+# Shared Design System
+
+Bộ thư viện thành phần giao diện dùng chung (Common Components) và hệ thống Design Tokens dành cho kiến trúc Microfrontend Portal.
+
+> **Current Version: v1.7.0** — Hệ thống đã được nâng cấp toàn diện với TypeScript, Tailwind Preset và 23+ components sẵn sàng cho sản xuất.
+
+---
+
+## 🚀 Cài đặt
+
+Thư viện này được quản lý như một package nội bộ trong monorepo. Bạn có thể sử dụng trực tiếp trong các ứng dụng MFE:
+
+```bash
+# Trong package.json của MFE
+"dependencies": {
+  "shared-design-system": "workspace:*"
+}
+```
+
+Dùng trong code:
+```typescript
+import { Button, Card, tokens } from 'shared-design-system';
+```
+
+---
+
+## 🎨 Tích hợp Tailwind CSS
+
+Thư viện cung cấp một Tailwind Preset để đồng bộ hóa bảng màu và cấu hình font.
+
+### 1. Cấu hình `tailwind.config.ts`
+Trong project MFE của bạn, hãy import và sử dụng preset:
+
+```typescript
+import type { Config } from 'tailwindcss';
+import sharedPreset from 'shared-design-system/tailwind.preset';
+
+const config: Config = {
+  presets: [sharedPreset],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // Quan trọng: Thêm đường dẫn tới file source của shared-design-system để Tailwind scan classes
+    "./node_modules/shared-design-system/src/components/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {
+      // Các tùy chỉnh riêng cho MFE của bạn
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+```
+
+---
+
+## 🧱 Hệ thống Thành phần (Components)
+
+### 🔹 Cơ bản (Basic Elements)
+*   **Button**: Nút bấm đa năng (`primary`, `secondary`, `danger`, `ghost`).
+*   **Badge**: Nhãn trạng thái (`success`, `warning`, `danger`, `info`).
+*   **Typography**: Hệ thống phân cấp chữ (`Heading`, `Text`, `SectionHeader`).
+*   **LoadingSpinner**: Hiệu ứng xoay khi đang tải dữ liệu.
+*   **Divider**: Đường kẻ phân tách nội dung.
+*   **Progress**: Thanh tiến trình (Linear Progress).
+
+### 🔹 Nhập liệu (Form & Inputs)
+*   **Input / Textarea**: Ô nhập văn bản hỗ trợ label và validation state.
+*   **Select**: Menu lựa chọn dropdown.
+*   **Checkbox / Radio**: Lựa chọn đơn hoặc nhiều.
+*   **Switch**: Nút gạt bật/tắt hiện đại.
+
+### 🔹 Điều hướng & Cấu trúc (Navigation & Layout)
+*   **Breadcrumbs**: Chỉ dẫn vị trí trang.
+*   **Tabs**: Hệ thống chuyển đổi nội dung, hỗ trợ truyền `items` cho tiện lợi.
+    ```jsx
+    <Tabs 
+      value={currentTab} 
+      onChange={setCurrentTab} 
+      items={[
+        { label: 'Tổng quan', value: 'overview' },
+        { label: 'Cài đặt', value: 'settings' }
+      ]}
+    />
+    ```
+*   **Steps**: Quy trình thực hiện (Workflow).
+*   **Stack**: Quản lý khoảng cách tự động giữa các phần tử.
+*   **Card**: Container bọc nội dung cao cấp.
+
+### 🔹 Dữ liệu & Danh sách (Data Display)
+*   **Table**: Component xây dựng bảng dữ liệu chuyên nghiệp theo hướng data-driven.
+    ```jsx
+    import { Table } from 'shared-design-system';
+
+    <Table 
+      columns={[
+        { key: 'name', label: 'Họ tên' },
+        { key: 'role', label: 'Vai trò' }
+      ]}
+      data={[
+        { name: 'Nguyễn Văn A', role: 'Admin' },
+        { name: 'Lê Thị B', role: 'User' }
+      ]}
+    />
+    ```
+*   **List & ListItem**: Danh sách hiển thị theo cấu trúc mảng hoặc children.
+    ```jsx
+    import { List, ListItem, Button } from 'shared-design-system';
+
+    <List 
+      items={[
+        { title: 'Thông tin người dùng', id: 1 },
+        { title: 'Cài đặt hệ thống', id: 2 }
+      ]}
+      renderItem={(item) => (
+        <ListItem action={<Button size="sm">Sửa</Button>}>
+          {item.title}
+        </ListItem>
+      )}
+    />
+    ```
+*   **Tag/Chip**: Nhãn dán hỗ trợ nút đóng (close).
+*   **Avatar**: Ảnh đại diện hoặc tên viết tắt.
+*   **ReadOnlyField**: Hiển thị dữ liệu ở chế độ chỉ đọc.
+*   **Skeleton**: Placeholder khi đang tải.
+
+### 🔹 Tương tác (Feedback & Overlays)
+*   **Alert**: Thông báo mức độ nghiêm trọng (`success`, `error`, etc.).
+*   **Tooltip**: Chú thích khi di chuột.
+*   **ConfirmModal**:
+    ```jsx
+    <ConfirmModal
+      isOpen={showModal}
+      title="Xác nhận xóa"
+      message="Bạn có chắc chắn muốn xóa bản ghi này?"
+      variant="danger"
+      onConfirm={handleDelete}
+      onCancel={() => setShowModal(false)}
+    />
+    ```
+
+---
+
+## 🔧 Design Tokens
+
+Tránh sử dụng mã màu hardcoded. Hãy sử dụng hệ thống tokens để đảm bảo tính nhất quán và hỗ trợ Theming trong tương lai.
+
+```typescript
+import { tokens } from 'shared-design-system';
+
+const style = {
+  backgroundColor: tokens.color.surfaceAlt,
+  padding: tokens.spacing[4],
+  borderRadius: tokens.radius.lg,
+  boxShadow: tokens.shadow.md
+};
+```
+
+---
+
+## 🛠 Nguyên tắc phát triển
+
+1.  **Strict Typing**: Tất cả components phải có Props interface được export rõ ràng.
+2.  **Stateless First**: Ưu tiên logic xử lý ở phía ứng dụng, component chỉ tập trung vào hiển thị (UI).
+3.  **Semantic HTML**: Sử dụng đúng các thẻ HTML (button, nav, section) để tối ưu SEO và Accessibility.
+4.  **Composition Over Inheritance**: Tận dụng `children` prop để tạo ra các layout linh hoạt.
+
+---
+
+## 📦 Quy trình Build
+
+```bash
+# Kiểm tra lỗi Type
+npm run typecheck
+
+# Build ra thư mục dist/
+npm run build
+```
+
+> **Lưu ý:** Thư mục `dist/` sẽ chứa mã JS đã transpose và các file `.d.ts`. Luôn chạy build trước khi tích hợp vào Portal.
+
+---
+© 2024 Portal Design System Team.

package/dist/src/components/ListComponents.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
-export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-    children: React.ReactNode;
+export interface ListProps<T = any> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    children?: React.ReactNode;
+    items?: T[];
+    renderItem?: (item: T, index: number) => React.ReactNode;
 }
-export declare const List: React.FC<ListProps>;
+export declare const List: <T extends any>({ children, items, renderItem, className, style, ...props }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     icon?: React.ReactNode;

package/dist/src/components/ListComponents.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { tokens } from '../tokens';
-export const List = ({ children, className = '', style = {} }) => (_jsx("ul", { style: {
+export const List = ({ children, items, renderItem, className = '', style = {}, ...props }) => (_jsx("ul", { style: {
         listStyle: 'none',
         padding: 0,
         margin: 0,
@@ -9,7 +10,7 @@ export const List = ({ children, className = '', style = {} }) => (_jsx("ul", {
         overflow: 'hidden',
         backgroundColor: tokens.color.surface,
         ...style
-    }, className: className, children: children }));
+    }, className: className, ...props, children: items && renderItem ? items.map((item, index) => _jsx(React.Fragment, { children: renderItem(item, index) }, index)) : children }));
 export const ListItem = ({ children, icon, action, onClick, className = '', style = {}, divider = true, active = false, ...props }) => {
     const itemStyle = {
         display: 'flex',

package/dist/src/components/ListComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListComponents.js","sourceRoot":"","sources":["../../../src/components/ListComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListComponents.js","sourceRoot":"","sources":["../../../src/components/ListComponents.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Table.d.ts

@@ -1,4 +1,24 @@
 import React from 'react';
+export interface TableColumn<T = any> {
+    key: string | number;
+    label: React.ReactNode;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: any, record: T, index: number) => React.ReactNode;
+    headerStyle?: React.CSSProperties;
+    cellStyle?: React.CSSProperties;
+}
+export interface TableProps<T = any> {
+    columns: TableColumn<T>[];
+    data: T[];
+    onRowClick?: (record: T, index: number) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    headerStyle?: React.CSSProperties;
+    rowStyle?: React.CSSProperties | ((record: T, index: number) => React.CSSProperties);
+    emptyText?: React.ReactNode;
+}
+export declare const Table: <T extends Record<string, any>>({ columns, data, onRowClick, className, style, headerStyle, rowStyle, emptyText, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export interface TableContainerProps {
     children: React.ReactNode;
     className?: string;
@@ -17,6 +37,7 @@ export interface TRProps {
     children: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLTableRowElement>;
     active?: boolean;
+    style?: React.CSSProperties;
 }
 export declare const TR: React.FC<TRProps>;
 export interface THProps {

package/dist/src/components/Table.js

@@ -1,5 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tokens } from '../tokens';
+export const Table = ({ columns, data, onRowClick, className = '', style = {}, headerStyle = {}, rowStyle = {}, emptyText = 'Không có dữ liệu', }) => {
+    return (_jsxs(TableContainer, { className: className, style: style, children: [_jsx(THead, { children: _jsx(TR, { children: columns.map((col) => (_jsx(TH, { style: {
+                            textAlign: col.align || 'left',
+                            width: col.width,
+                            ...col.headerStyle,
+                            ...headerStyle,
+                        }, children: col.label }, col.key.toString()))) }) }), _jsx(TBody, { children: data.length > 0 ? (data.map((record, rowIndex) => (_jsx(TR, { onClick: onRowClick ? () => onRowClick(record, rowIndex) : undefined, style: typeof rowStyle === 'function' ? rowStyle(record, rowIndex) : rowStyle, children: columns.map((col) => (_jsx(TD, { style: {
+                            textAlign: col.align || 'left',
+                            ...col.cellStyle,
+                        }, children: col.render
+                            ? col.render(record[col.key], record, rowIndex)
+                            : record[col.key] }, col.key.toString()))) }, record.id || record.key || rowIndex)))) : (_jsx(TR, { children: _jsx(TD, { style: { textAlign: 'center', padding: tokens.spacing[12], color: tokens.color.textMuted }, children: emptyText }) })) })] }));
+};
 export const TableContainer = ({ children, className = '', style = {} }) => (_jsx("div", { style: {
         width: '100%',
         overflowX: 'auto',
@@ -20,11 +33,12 @@ export const THead = ({ children }) => (_jsx("thead", { style: {
         borderBottom: `2px solid ${tokens.color.border}`,
     }, children: children }));
 export const TBody = ({ children }) => (_jsx("tbody", { style: { backgroundColor: tokens.color.surface }, children: children }));
-export const TR = ({ children, onClick, active = false }) => (_jsx("tr", { onClick: onClick, style: {
+export const TR = ({ children, onClick, active = false, style = {} }) => (_jsx("tr", { onClick: onClick, style: {
         borderBottom: `1px solid ${tokens.color.surfaceAlt}`,
         backgroundColor: active ? tokens.color.primaryLight + '44' : 'transparent',
         transition: tokens.transition.fast,
         cursor: onClick ? 'pointer' : 'default',
+        ...style,
     }, onMouseEnter: onClick
         ? (e) => {
             e.currentTarget.style.backgroundColor = tokens.color.surfaceAlt;

package/dist/src/components/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Tabs.d.ts

@@ -6,10 +6,17 @@ export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     variant?: 'standard' | 'pills';
 }
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabItem {
+    label: string;
+    value: any;
+    icon?: React.ReactNode;
+}
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     value: any;
     onChange: (value: any) => void;
     variant?: 'standard' | 'pills';
+    items?: TabItem[];
+    children?: React.ReactNode;
 }
 export declare const Tabs: React.FC<TabsProps>;
 export declare const Tab: React.FC<TabProps>;

package/dist/src/components/Tabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { tokens } from '../tokens';
-export const Tabs = ({ value, onChange, children, variant = 'standard', className = '', style = {} }) => {
+export const Tabs = ({ value, onChange, items, children, variant = 'standard', className = '', style = {} }) => {
     const containerStyle = {
         display: 'flex',
         borderBottom: variant === 'standard' ? `1px solid ${tokens.color.border}` : 'none',
@@ -10,7 +10,7 @@ export const Tabs = ({ value, onChange, children, variant = 'standard', classNam
         overflowX: 'auto',
         ...style
     };
-    return (_jsx("div", { style: containerStyle, className: className, children: React.Children.map(children, child => {
+    return (_jsx("div", { style: containerStyle, className: className, children: items ? items.map((item, index) => (_jsx(Tab, { label: item.label, value: item.value, icon: item.icon, active: item.value === value, onClick: () => onChange(item.value), variant: variant }, index))) : React.Children.map(children, child => {
             if (!React.isValidElement(child))
                 return null;
             return React.cloneElement(child, {

package/dist/src/components/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/src/index.d.ts

@@ -19,7 +19,7 @@ export type { AvatarProps } from './components/Avatar';
 export { Switch } from './components/Switch';
 export type { SwitchProps } from './components/Switch';
 export { Tabs, Tab } from './components/Tabs';
-export type { TabsProps, TabProps } from './components/Tabs';
+export type { TabsProps, TabProps, TabItem } from './components/Tabs';
 export { Breadcrumbs } from './components/Breadcrumbs';
 export type { BreadcrumbsProps } from './components/Breadcrumbs';
 export { Divider } from './components/Divider';
@@ -38,8 +38,8 @@ export { Tag } from './components/Tag';
 export type { TagProps } from './components/Tag';
 export { List, ListItem } from './components/ListComponents';
 export type { ListProps, ListItemProps } from './components/ListComponents';
-export { TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
-export type { TableContainerProps, THeadProps, TBodyProps, TRProps, THProps, TDProps } from './components/Table';
+export { Table, TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
+export type { TableProps, TableColumn, TableContainerProps, THeadProps, TBodyProps, TRProps, THProps, TDProps } from './components/Table';
 export { Radio, RadioGroup } from './components/Radio';
 export type { RadioProps, RadioGroupProps } from './components/Radio';
 export { Steps } from './components/Steps';

package/dist/src/index.js

@@ -21,7 +21,7 @@ export { Alert } from './components/Alert';
 export { Progress } from './components/Progress';
 export { Tag } from './components/Tag';
 export { List, ListItem } from './components/ListComponents';
-export { TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
+export { Table, TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
 export { Radio, RadioGroup } from './components/Radio';
 export { Steps } from './components/Steps';
 // ─── Design Tokens ────────────────────────────────────────────────────────────

package/dist/src/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;AAClC,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,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAGrF,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,6 +1,6 @@
 {
   "name": "shared-design-system",
-  "version": "1.6.0",
+  "version": "1.9.0",
   "description": "Shared Tailwind Design System & UI Tokens for all Micro Frontends",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -40,14 +40,14 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.4.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.6.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/node": "^20.11.0"
   }
 }