shared-design-system 1.2.0

package/README.md

@@ -0,0 +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.

package/dist/components/Alert.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    severity?: 'success' | 'warning' | 'error' | 'info';
+    title?: string;
+    variant?: 'standard';
+    icon?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Alert.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '../tokens';
+const getIcon = (severity, icon) => {
+    if (icon)
+        return icon;
+    switch (severity) {
+        case 'success':
+            return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("path", { d: "M22 11.08V12a10 10 0 11-5.93-9.14" }), _jsx("path", { d: "M22 4L12 14.01l-3-3" })] }));
+        case 'warning':
+            return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }));
+        case 'error':
+            return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }));
+        case 'info':
+        default:
+            return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] }));
+    }
+};
+const getSeverityStyles = (severity) => {
+    switch (severity) {
+        case 'success':
+            return { bg: tokens.color.successBg, border: 'rgba(16, 185, 129, 0.2)', text: tokens.color.success, darkText: '#065f46' };
+        case 'warning':
+            return { bg: tokens.color.warningBg, border: 'rgba(245, 158, 11, 0.2)', text: tokens.color.warning, darkText: '#92400e' };
+        case 'error':
+            return { bg: tokens.color.dangerBg, border: 'rgba(239, 68, 68, 0.2)', text: tokens.color.danger, darkText: '#991b1b' };
+        case 'info':
+        default:
+            return { bg: tokens.color.infoBg, border: 'rgba(59, 130, 246, 0.2)', text: tokens.color.info, darkText: '#1e40af' };
+    }
+};
+export const Alert = ({ severity = 'info', title, children, className = '', style = {}, variant = 'standard', icon, onClose, ...props }) => {
+    const s = getSeverityStyles(severity);
+    const baseStyle = {
+        display: 'flex',
+        gap: tokens.spacing['3'],
+        padding: tokens.spacing['4'],
+        borderRadius: tokens.radius.lg,
+        border: `1px solid ${s.border}`,
+        backgroundColor: s.bg,
+        color: s.darkText,
+        fontSize: tokens.font.sm,
+        lineHeight: 1.5,
+        position: 'relative',
+        ...style,
+    };
+    return (_jsxs("div", { style: baseStyle, className: className, ...props, children: [_jsx("div", { style: { color: s.text, flexShrink: 0, marginTop: '2px' }, children: getIcon(severity, icon) }), _jsxs("div", { style: { flex: 1 }, children: [title && _jsx("div", { style: { fontWeight: tokens.font.weightSemibold, marginBottom: '2px' }, children: title }), _jsx("div", { style: { opacity: 0.9 }, children: children })] }), onClose && (_jsx("button", { onClick: onClose, style: {
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: tokens.spacing['1'],
+                    color: 'inherit',
+                    opacity: 0.5,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }))] }));
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

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

package/dist/components/Avatar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface AvatarProps extends React.HTMLAttributes<HTMLElement> {
+    src?: string;
+    alt?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'circle' | 'rounded' | 'square';
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/Avatar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokens } from '../tokens';
+export const Avatar = ({ src, alt, children, size = 'md', variant = 'circle', className = '', style = {}, ...props }) => {
+    const getDims = () => {
+        switch (size) {
+            case 'xs': return '24px';
+            case 'sm': return '32px';
+            case 'lg': return '48px';
+            case 'xl': return '64px';
+            case 'md':
+            default: return '40px';
+        }
+    };
+    const getRadius = () => {
+        if (variant === 'rounded')
+            return tokens.radius.md;
+        if (variant === 'square')
+            return '0';
+        return '50%';
+    };
+    const dims = getDims();
+    const baseStyle = {
+        width: dims,
+        height: dims,
+        borderRadius: getRadius(),
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: tokens.color.surfaceAlt,
+        color: tokens.color.textMuted,
+        fontSize: `calc(${dims} / 2.2)`,
+        fontWeight: tokens.font.weightBold,
+        overflow: 'hidden',
+        userSelect: 'none',
+        border: `1px solid ${tokens.color.border}`,
+        ...style
+    };
+    if (src) {
+        return (_jsx("img", { src: src, alt: alt || 'Avatar', style: baseStyle, className: className, ...props }));
+    }
+    return (_jsx("div", { style: baseStyle, className: className, ...props, children: children }));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AASnC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAO,IAAI,EAAE,CAAC;YACZ,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC,CAAC,OAAO,MAAM,CAAC;YACzB,KAAK,IAAI,CAAC;YACV,OAAO,CAAC,CAAC,OAAO,MAAM,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,OAAO,KAAK,SAAS;YAAE,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;QACnD,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAO,GAAG,CAAC;QACrC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,SAAS,GAAwB;QACrC,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,SAAS,EAAE;QACzB,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;QACxC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;QAC7B,QAAQ,EAAE,QAAQ,IAAI,SAAS;QAC/B,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;QAClC,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,MAAe;QAC3B,MAAM,EAAE,aAAa,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE;QAC1C,GAAG,KAAK;KACT,CAAC;IAEF,IAAI,GAAG,EAAE,CAAC;QACR,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,QAAQ,EACpB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,KAAM,KAA6C,YAC3F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'success' | 'warning' | 'danger' | 'info' | 'slate';
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Badge.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokens } from '../tokens';
+export const Badge = ({ children, variant = 'slate', className = '', style = {}, ...props }) => {
+    const getVariantStyles = () => {
+        switch (variant) {
+            case 'success':
+                return {
+                    backgroundColor: tokens.color.successBg,
+                    color: tokens.color.success,
+                    borderColor: 'rgba(16, 185, 129, 0.2)'
+                };
+            case 'warning':
+                return {
+                    backgroundColor: tokens.color.warningBg,
+                    color: tokens.color.warning,
+                    borderColor: 'rgba(245, 158, 11, 0.2)'
+                };
+            case 'danger':
+                return {
+                    backgroundColor: tokens.color.dangerBg,
+                    color: tokens.color.danger,
+                    borderColor: 'rgba(239, 68, 68, 0.2)'
+                };
+            case 'info':
+                return {
+                    backgroundColor: tokens.color.infoBg,
+                    color: tokens.color.info,
+                    borderColor: 'rgba(59, 130, 246, 0.2)'
+                };
+            case 'slate':
+            default:
+                return {
+                    backgroundColor: tokens.color.surfaceAlt,
+                    color: tokens.color.textMuted,
+                    borderColor: tokens.color.border
+                };
+        }
+    };
+    const vStyles = getVariantStyles();
+    const baseStyle = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: `${tokens.spacing[1]} ${tokens.spacing[3]}`,
+        borderRadius: tokens.radius.full,
+        fontSize: tokens.font.xs,
+        fontWeight: tokens.font.weightBold,
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        border: '1px solid transparent',
+        ...vStyles,
+        ...style
+    };
+    return (_jsx("span", { style: baseStyle, className: className, ...props, children: children }));
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMnC,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,SAAS;gBACZ,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;oBACvC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;oBAC3B,WAAW,EAAE,yBAAyB;iBACvC,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;oBACvC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO;oBAC3B,WAAW,EAAE,yBAAyB;iBACvC,CAAC;YACJ,KAAK,QAAQ;gBACX,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;oBACtC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;oBAC1B,WAAW,EAAE,wBAAwB;iBACtC,CAAC;YACJ,KAAK,MAAM;gBACT,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;oBACpC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI;oBACxB,WAAW,EAAE,yBAAyB;iBACvC,CAAC;YACJ,KAAK,OAAO,CAAC;YACb;gBACE,OAAO;oBACL,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;oBACxC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;oBAC7B,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;iBACjC,CAAC;QACN,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QACpD,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI;QAChC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;QACxB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;QAClC,aAAa,EAAE,WAAoB;QACnC,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,uBAAuB;QAC/B,GAAG,OAAO;QACV,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,eAAM,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK,YACpD,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+}
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '../tokens';
+export const Breadcrumbs = ({ items = [], separator = '/', className = '', style = {} }) => {
+    const containerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: tokens.spacing[2],
+        fontSize: tokens.font.xs,
+        color: tokens.color.textMuted,
+        listStyle: 'none',
+        padding: 0,
+        margin: 0,
+        ...style
+    };
+    const itemStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: tokens.spacing[2],
+    };
+    const linkStyle = {
+        color: 'inherit',
+        textDecoration: 'none',
+        cursor: 'pointer',
+        transition: tokens.transition.fast,
+    };
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: className, children: _jsx("ol", { style: containerStyle, children: items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                return (_jsx("li", { style: itemStyle, children: isLast ? (_jsx("span", { style: { fontWeight: tokens.font.weightBold, color: tokens.color.text }, children: item.label })) : (_jsxs(_Fragment, { children: [_jsx("span", { style: linkStyle, onClick: item.onClick, onMouseEnter: (e) => e.currentTarget.style.color = tokens.color.primary, onMouseLeave: (e) => e.currentTarget.style.color = 'inherit', children: item.label }), _jsx("span", { style: { opacity: 0.5, userSelect: 'none' }, children: separator })] })) }, index));
+            }) }) }));
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../src/components/Breadcrumbs.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAYnC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,GAAG,EACf,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACX,EAAE,EAAE;IACH,MAAM,cAAc,GAAwB;QAC1C,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACtB,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;QACxB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,SAAS;QAC7B,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;KACvB,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,MAAM;QACtB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;KACnC,CAAC;IAEF,OAAO,CACL,4BAAgB,YAAY,EAAC,SAAS,EAAE,SAAS,YAC/C,aAAI,KAAK,EAAE,cAAc,YACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBAE1C,OAAO,CACL,aAAgB,KAAK,EAAE,SAAS,YAC7B,MAAM,CAAC,CAAC,CAAC,CACR,eAAM,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,YAC1E,IAAI,CAAC,KAAK,GACN,CACR,CAAC,CAAC,CAAC,CACF,8BACE,eACE,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,EACxF,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,aAA6B,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,YAE5E,IAAI,CAAC,KAAK,GACN,EACP,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAe,EAAE,YAAG,SAAS,GAAQ,IAC7E,CACJ,IAjBM,KAAK,CAkBT,CACN,CAAC;YACJ,CAAC,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    isActive?: boolean;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { tokens } from '../tokens';
+export const Button = ({ children, variant = 'primary', size = 'md', disabled = false, onClick, style = {}, className = '', isActive = false, ...props }) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const getVariantStyles = () => {
+        switch (variant) {
+            case 'secondary':
+                return {
+                    backgroundColor: tokens.color.surfaceAlt,
+                    color: tokens.color.text,
+                    border: `1px solid ${tokens.color.border}`,
+                    boxShadow: tokens.shadow.sm,
+                    hoverBg: tokens.color.border,
+                };
+            case 'danger':
+                return {
+                    backgroundColor: tokens.color.danger,
+                    color: 'white',
+                    border: '1px solid transparent',
+                    boxShadow: tokens.shadow.sm,
+                    hoverBg: '#dc2626',
+                };
+            case 'ghost':
+                return {
+                    backgroundColor: 'transparent',
+                    color: tokens.color.textMuted,
+                    border: '1px solid transparent',
+                    boxShadow: 'none',
+                    hoverBg: tokens.color.surfaceAlt,
+                };
+            case 'primary':
+            default:
+                return {
+                    backgroundColor: tokens.color.primary,
+                    color: 'white',
+                    border: '1px solid transparent',
+                    boxShadow: tokens.shadow.sm,
+                    hoverBg: tokens.color.primaryDark,
+                };
+        }
+    };
+    const getSizeStyles = () => {
+        switch (size) {
+            case 'sm':
+                return { padding: `${tokens.spacing[1]} ${tokens.spacing[3]}`, fontSize: tokens.font.xs };
+            case 'lg':
+                return { padding: `${tokens.spacing[3]} ${tokens.spacing[6]}`, fontSize: tokens.font.md };
+            case 'md':
+            default:
+                return { padding: `${tokens.spacing[2]} ${tokens.spacing[4]}`, fontSize: tokens.font.sm };
+        }
+    };
+    const vStyles = getVariantStyles();
+    const sStyles = getSizeStyles();
+    const baseStyle = {
+        fontFamily: tokens.font.family,
+        fontWeight: tokens.font.weightBold,
+        borderRadius: tokens.radius.md,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: tokens.transition.fast,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: tokens.spacing[2],
+        outline: 'none',
+        opacity: disabled ? 0.6 : 1,
+        backgroundColor: disabled ? vStyles.backgroundColor : (isActive ? vStyles.hoverBg : (isHovered ? vStyles.hoverBg : vStyles.backgroundColor)),
+        color: vStyles.color,
+        border: vStyles.border,
+        boxShadow: vStyles.boxShadow,
+        ...sStyles,
+        ...style,
+    };
+    return (_jsx("button", { style: baseStyle, className: className, disabled: disabled, onClick: disabled ? undefined : onClick, onMouseEnter: () => !disabled && setIsHovered(true), onMouseLeave: () => !disabled && setIsHovered(false), ...props, children: children }));
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

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

package/dist/components/Card.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    footer?: React.ReactNode;
+    padding?: 'sm' | 'md' | 'lg';
+}
+export declare const Card: React.FC<CardProps>;

package/dist/components/Card.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from '../tokens';
+export const Card = ({ children, title, subtitle, footer, className = '', style = {}, padding = 'md', ...props }) => {
+    const getPadding = () => {
+        switch (padding) {
+            case 'sm': return tokens.spacing[4];
+            case 'lg': return tokens.spacing[8];
+            case 'md':
+            default: return tokens.spacing[6];
+        }
+    };
+    const containerStyle = {
+        backgroundColor: tokens.color.surface,
+        borderRadius: tokens.radius.xl,
+        border: `1px solid ${tokens.color.border}`,
+        boxShadow: tokens.shadow.sm,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        ...style
+    };
+    const bodyStyle = {
+        padding: getPadding(),
+        flex: 1
+    };
+    const headerStyle = {
+        padding: `${tokens.spacing[4]} ${getPadding()}`,
+        borderBottom: `1px solid ${tokens.color.surfaceAlt}`,
+        backgroundColor: tokens.color.surfaceAlt,
+        borderTop: `4px solid ${tokens.color.primary}`,
+    };
+    const footerStyle = {
+        padding: `${tokens.spacing[4]} ${getPadding()}`,
+        borderTop: `1px solid ${tokens.color.border}`,
+        backgroundColor: tokens.color.surfaceAlt,
+    };
+    return (_jsxs("div", { style: containerStyle, className: className, ...props, children: [(title || subtitle) && (_jsxs("div", { style: headerStyle, children: [title && _jsx("h3", { style: { margin: 0, fontSize: tokens.font.md, fontWeight: tokens.font.weightBold, color: tokens.color.text }, children: title }), subtitle && _jsx("p", { style: { margin: `${tokens.spacing[1]} 0 0 0`, fontSize: tokens.font.xs, color: tokens.color.textMuted }, children: subtitle })] })), _jsx("div", { style: bodyStyle, children: children }), footer && (_jsx("div", { style: footerStyle, children: footer }))] }));
+};
+//# sourceMappingURL=Card.js.map