npm - @vetc-miniapp/ui-react - Versions diffs - 0.0.23 → 0.0.25 - Mend

@vetc-miniapp/ui-react 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/README.md +375 -56
package/dist/bridge.d.ts +11 -0
package/dist/bridge.js +20 -0
package/dist/components/app.d.ts +6 -0
package/dist/components/app.js +34 -0
package/dist/components/avatar/Avatar.d.ts +21 -0
package/dist/components/avatar/Avatar.js +33 -0
package/dist/components/avatar/index.d.ts +2 -0
package/dist/components/avatar/index.js +1 -0
package/dist/components/bottom-sheet/BottomSheet.d.ts +19 -0
package/dist/components/bottom-sheet/BottomSheet.js +70 -0
package/dist/components/bottom-sheet/index.d.ts +2 -0
package/dist/components/bottom-sheet/index.js +1 -0
package/dist/components/button/Button.d.ts +32 -0
package/dist/components/button/Button.js +165 -0
package/dist/components/button/index.d.ts +2 -0
package/dist/components/button/index.js +1 -0
package/dist/components/button-group/ButtonGroup.d.ts +28 -0
package/dist/components/button-group/ButtonGroup.js +21 -0
package/dist/components/button-group/index.d.ts +2 -0
package/dist/components/button-group/index.js +1 -0
package/dist/components/card/Card.d.ts +18 -0
package/dist/components/card/Card.js +35 -0
package/dist/components/card/index.d.ts +2 -0
package/dist/components/card/index.js +1 -0
package/dist/components/checkbox/Checkbox.d.ts +41 -0
package/dist/components/checkbox/Checkbox.js +94 -0
package/dist/components/checkbox/index.d.ts +2 -0
package/dist/components/checkbox/index.js +1 -0
package/dist/components/chip/Chip.d.ts +24 -0
package/dist/components/chip/Chip.js +83 -0
package/dist/components/chip/index.d.ts +2 -0
package/dist/components/chip/index.js +1 -0
package/dist/components/dialog/Dialog.d.ts +19 -0
package/dist/components/dialog/Dialog.js +51 -0
package/dist/components/dialog/index.d.ts +2 -0
package/dist/components/dialog/index.js +1 -0
package/dist/components/divider/Divider.d.ts +16 -0
package/dist/components/divider/Divider.js +18 -0
package/dist/components/divider/index.d.ts +2 -0
package/dist/components/divider/index.js +1 -0
package/dist/components/input/Input.d.ts +40 -0
package/dist/components/input/Input.js +51 -0
package/dist/components/input/index.d.ts +2 -0
package/dist/components/input/index.js +1 -0
package/dist/components/list/List.d.ts +31 -0
package/dist/components/list/List.js +72 -0
package/dist/components/list/index.d.ts +2 -0
package/dist/components/list/index.js +1 -0
package/dist/components/loading/Loading.d.ts +28 -0
package/dist/components/loading/Loading.js +33 -0
package/dist/components/loading/index.d.ts +2 -0
package/dist/components/loading/index.js +1 -0
package/dist/components/modal/Modal.d.ts +38 -0
package/dist/components/modal/Modal.js +50 -0
package/dist/components/modal/index.d.ts +2 -0
package/dist/components/modal/index.js +1 -0
package/dist/components/navigation-bar/NavigationBar.d.ts +44 -0
package/dist/components/navigation-bar/NavigationBar.js +70 -0
package/dist/components/navigation-bar/index.d.ts +2 -0
package/dist/components/navigation-bar/index.js +1 -0
package/dist/components/radio/Radio.d.ts +40 -0
package/dist/components/radio/Radio.js +88 -0
package/dist/components/radio/index.d.ts +2 -0
package/dist/components/radio/index.js +1 -0
package/dist/components/select/Select.d.ts +29 -0
package/dist/components/select/Select.js +30 -0
package/dist/components/select/index.d.ts +2 -0
package/dist/components/select/index.js +1 -0
package/dist/components/switch/Switch.d.ts +23 -0
package/dist/components/switch/Switch.js +81 -0
package/dist/components/switch/index.d.ts +2 -0
package/dist/components/switch/index.js +1 -0
package/dist/components/tab-bar/TabBar.d.ts +28 -0
package/dist/components/tab-bar/TabBar.js +60 -0
package/dist/components/tab-bar/index.d.ts +2 -0
package/dist/components/tab-bar/index.js +1 -0
package/dist/components/textarea/Textarea.d.ts +31 -0
package/dist/components/textarea/Textarea.js +33 -0
package/dist/components/textarea/index.d.ts +2 -0
package/dist/components/textarea/index.js +1 -0
package/dist/components/toast/Toast.d.ts +41 -0
package/dist/components/toast/Toast.js +61 -0
package/dist/components/toast/index.d.ts +2 -0
package/dist/components/toast/index.js +1 -0
package/dist/components/typography/Typography.d.ts +45 -0
package/dist/components/typography/Typography.js +143 -0
package/dist/components/typography/index.d.ts +2 -0
package/dist/components/typography/index.js +1 -0
package/dist/hooks/use-app-pause.d.ts +6 -0
package/dist/hooks/use-app-pause.js +29 -0
package/dist/hooks/use-app-resume.d.ts +6 -0
package/dist/hooks/use-app-resume.js +28 -0
package/{src/ui-react/hooks/use-app-state.ts → dist/hooks/use-app-state.d.ts} +0 -1
package/dist/hooks/use-app-state.js +1 -0
package/dist/hooks/use-did-hide.d.ts +6 -0
package/dist/hooks/use-did-hide.js +21 -0
package/dist/hooks/use-did-show.d.ts +6 -0
package/dist/hooks/use-did-show.js +21 -0
package/dist/hooks/use-listener-scan-qr.d.ts +21 -0
package/dist/hooks/use-listener-scan-qr.js +29 -0
package/dist/hooks/use-navigate.d.ts +8 -0
package/dist/hooks/use-navigate.js +23 -0
package/dist/hooks/use-tap-app-bar.d.ts +6 -0
package/dist/hooks/use-tap-app-bar.js +21 -0
package/dist/index.d.ts +56 -0
package/dist/index.js +41 -0
package/dist/styles/VETCProvider.d.ts +114 -0
package/dist/styles/VETCProvider.js +124 -0
package/dist/styles/tokens.css +448 -0
package/dist/tokens/colors.d.ts +127 -0
package/dist/tokens/colors.js +75 -0
package/dist/tokens/index.d.ts +3 -0
package/dist/tokens/index.js +3 -0
package/dist/tokens/spacing.d.ts +56 -0
package/dist/tokens/spacing.js +56 -0
package/dist/tokens/typography.d.ts +121 -0
package/dist/tokens/typography.js +57 -0
package/dist/types/app.d.ts +21 -0
package/dist/types/app.js +1 -0
package/package.json +26 -8
package/src/dist/ui-react/index.js +0 -2
package/src/dist/ui-react/index.js.LICENSE.txt +0 -11
package/src/ui-react/bridge.js +0 -36
package/src/ui-react/bridge.ts +0 -48
package/src/ui-react/components/app.d.ts +0 -7
package/src/ui-react/components/app.jsx +0 -80
package/src/ui-react/components/app.tsx +0 -42
package/src/ui-react/components/app1.js +0 -101
package/src/ui-react/hooks/use-app-pause.js +0 -35
package/src/ui-react/hooks/use-app-pause.ts +0 -33
package/src/ui-react/hooks/use-app-resume.js +0 -37
package/src/ui-react/hooks/use-app-resume.ts +0 -32
package/src/ui-react/hooks/use-app-state.js +0 -35
package/src/ui-react/hooks/use-did-hide.js +0 -25
package/src/ui-react/hooks/use-did-hide.ts +0 -34
package/src/ui-react/hooks/use-did-show.js +0 -26
package/src/ui-react/hooks/use-did-show.ts +0 -34
package/src/ui-react/hooks/use-listener-scan-qr.js +0 -33
package/src/ui-react/hooks/use-listener-scan-qr.ts +0 -52
package/src/ui-react/hooks/use-navigate.js +0 -15
package/src/ui-react/hooks/use-navigate.ts +0 -41
package/src/ui-react/index.js +0 -8
package/src/ui-react/index.ts +0 -9
package/src/ui-react/types/app.js +0 -30
package/src/ui-react/types/app.ts +0 -32

package/README.md CHANGED Viewed

@@ -1,102 +1,421 @@
-# MiniApp JS SDK
+# @vetc-miniapp/ui-react
-SDK giúp Mini App giao tiếp với Super App host thông qua JS Bridge.
+Bộ UI component React cho VETC MiniApp Platform, được xây dựng theo design system **Tasco DLS Mini App** từ Figma, sử dụng Ant Design v6 làm base và override hoàn toàn theo VETC design token.
+---
 ## Cài đặt
 ```bash
+npm install antd @ant-design/icons
 npm install @vetc-miniapp/ui-react
 ```
-## Sử dụng
-# useNavigate – Điều hướng Mini App qua Native (Flutter)
-`useNavigate` là hook dùng trong **mini app React** để điều hướng **thông qua host app (Flutter)**, thay vì tự điều hướng nội bộ bằng `react-router-dom`.
+## Sử dụng cơ bản
-Hook này giúp:
+```tsx
+// 1. Import CSS tokens ở app root (1 lần duy nhất)
+import '@vetc-miniapp/ui-react/src/ui-react/styles/tokens.css';
-- Mini app **không phụ thuộc URL thực**
-- Toàn bộ navigation được **native kiểm soát**
-- **Đồng bộ header, back stack, animation** giữa mini app & app chính
+// 2. Wrap app với VETCProvider
+import { VETCProvider } from '@vetc-miniapp/ui-react';
+function App() {
+  return (
+    <VETCProvider>
+      <YourApp />
+    </VETCProvider>
+  );
+}
+```
 ---
-## 📦 Import
+## Components
-```ts
-import { useNavigate } from '@vetc-miniapp/ui-react';
+### Button
-const navigate = useNavigate();
+```tsx
+import { Button } from '@vetc-miniapp/ui-react';
-navigate(
-  path: string,
-  title: string,
-  params?: Record<string, any>,
-  options?: {
-    replace?: boolean;
-    popTo?: string;
-  }
-): void
+// Primary (default) — brand green
+<Button variant="primary" size="lg">Xác nhận</Button>
+// Secondary — outlined
+<Button variant="secondary" size="lg">Hủy</Button>
+// Tertiary — ghost/text
+<Button variant="tertiary">Xem thêm</Button>
+// Danger
+<Button variant="danger">Xóa</Button>
+// Pill shape
+<Button variant="primary" shape="pill">Tìm kiếm</Button>
+// Small size (32px)
+<Button variant="primary" size="sm">OK</Button>
+// Loading & disabled
+<Button loading>Đang xử lý...</Button>
+<Button disabled>Không khả dụng</Button>
 ```
-## 🚀 Cách sử dụng cơ bản
-# Điều hướng sang page khác
-```ts
-const navigate = useNavigate();
+**Props:** `variant` (primary|secondary|tertiary|danger), `size` (lg|sm), `shape` (rounded|pill), `block`, `disabled`, `loading`, `icon`, `iconRight`
+---
+### Typography
+```tsx
+import { Display, Headline, Title, Label, Body, Typography } from '@vetc-miniapp/ui-react';
+<Display level="2xl">Tiêu đề lớn</Display>
+<Headline level="xl">Headline</Headline>
+<Title size="base">Tiêu đề phần</Title>
+<Label size="sm" color="secondary">Nhãn</Label>
+<Body size="base" color="primary">Nội dung văn bản</Body>
+// Màu sắc: primary | secondary | disabled | brand | error | warning | success | inherit
+<Body color="error">Lỗi rồi!</Body>
+// Clamp lines
+<Body lines={2}>Nội dung dài sẽ bị cắt sau 2 dòng...</Body>
+```
+---
+### Input / TextField
+```tsx
+import { Input, PasswordInput } from '@vetc-miniapp/ui-react';
+// Default
+<Input label="Số điện thoại" placeholder="0901 234 567" />
+// Required + error
+<Input
+  label="Email"
+  required
+  error="Email không hợp lệ"
+  value={email}
+  onChange={setEmail}
+/>
+// With icons
+<Input prefix={<PhoneIcon />} suffix={<ClearIcon />} allowClear />
+// Password
+<PasswordInput label="Mật khẩu" placeholder="Nhập mật khẩu" />
+```
+---
+### Textarea
+```tsx
+import { Textarea } from '@vetc-miniapp/ui-react';
+<Textarea
+  label="Ghi chú"
+  placeholder="Nhập nội dung..."
+  rows={4}
+  maxLength={500}
+  showCount
+/>
+```
+---
+### Select
+```tsx
+import { Select } from '@vetc-miniapp/ui-react';
+<Select
+  label="Tỉnh/Thành phố"
+  placeholder="Chọn tỉnh thành"
+  options={[
+    { label: 'Hà Nội', value: 'HN' },
+    { label: 'TP.HCM', value: 'HCM' },
+  ]}
+  onChange={(val) => console.log(val)}
+/>
+```
+---
+### Checkbox / Radio / Switch
+```tsx
+import { Checkbox, CheckboxGroup, Radio, RadioGroup, Switch } from '@vetc-miniapp/ui-react';
+// Checkbox
+<Checkbox label="Đồng ý điều khoản" checked={agreed} onChange={setAgreed} />
+// Checkbox Group
+<CheckboxGroup
+  options={[
+    { label: 'Tùy chọn A', value: 'a' },
+    { label: 'Tùy chọn B', value: 'b' },
+  ]}
+  value={selected}
+  onChange={setSelected}
+  direction="vertical"
+/>
+// Radio Group
+<RadioGroup
+  options={[{ label: 'Nam', value: 'male' }, { label: 'Nữ', value: 'female' }]}
+  value={gender}
+  onChange={setGender}
+/>
+// Switch
+<Switch label="Bật thông báo" checked={notif} onChange={setNotif} />
+```
+---
+### Chip / Tag
+```tsx
+import { Chip } from '@vetc-miniapp/ui-react';
+// Types: default | brand | positive | negative | warning | info
+// Variants: tinted | outlined | filled
+<Chip type="positive" variant="tinted">Hoàn thành</Chip>
+<Chip type="negative" variant="filled">Lỗi</Chip>
+<Chip type="warning" variant="outlined" closable onClose={...}>Cảnh báo</Chip>
+// Small
+<Chip size="sm" type="info">Mới</Chip>
+```
+---
+### Avatar
-<button onClick={() => navigate('/about', { title: "About", params: {}})}>
-  Go to About
-</button>
+```tsx
+import { Avatar } from '@vetc-miniapp/ui-react';
-Truyền params
-navigate('/vehicle-detail', {
-  title: "About",
-  params: {
-    id: 'abc123',
-    source: 'homepage',
-  }
-});
+// Image
+<Avatar src="https://..." alt="User" size="md" />
+// Initials
+<Avatar initials="Nguyễn Văn A" size="lg" color="#25a45e" />
+// Sizes: xl(56) | lg(48) | md(40) | sm(32) | xs(24)
 ```
-# ➡ Flutter sẽ nhận được URL dạng:
+---
+### Card
-/miniapp/vehicle-detail?id=abc123&source=homepage
+```tsx
+import { Card } from '@vetc-miniapp/ui-react';
-## 🔁 Replace route (không giữ back stack)
+// Elevations: outlined | raised | flat
+<Card elevation="outlined" title="Thông tin xe" extra={<Button size="sm">Sửa</Button>}>
+  Nội dung card...
+</Card>
 ```
-navigate('/login', { mode: 'replace' });
+---
+### List / ListItem
-navigate('/home', { popTo: '/home' });
+```tsx
+import { List, ListItem } from '@vetc-miniapp/ui-react';
+<List
+  bordered
+  items={vehicles}
+  renderItem={(v) => (
+    <ListItem
+      leading={<CarIcon />}
+      title={v.plate}
+      description={v.type}
+      arrow
+      onClick={() => navigate(v.id)}
+    />
+  )}
+/>
 ```
-## 🧩 Ví dụ đầy đủ trong Component
+---
+### Loading
+```tsx
+import { Spinner, SkeletonLoader } from '@vetc-miniapp/ui-react';
+// Spinner inline
+<Spinner size="md" />
+// Full-screen overlay
+<Spinner fullscreen spinning={isLoading} />
+// Spinner wrapping content
+<Spinner spinning={loading}>
+  <Content />
+</Spinner>
+// Skeleton
+<SkeletonLoader loading={loading} rows={3} avatar>
+  <ActualContent />
+</SkeletonLoader>
+```
+---
+### Toast
+```tsx
+import { toast, useToast } from '@vetc-miniapp/ui-react';
+// Static (simple)
+toast.success('Đăng ký thành công!');
+toast.error('Có lỗi xảy ra', 'Vui lòng thử lại');
+toast.warning('Cảnh báo');
+toast.info('Thông tin');
+// Hook-based (recommended)
+function MyComponent() {
+  const { toast, contextHolder } = useToast();
+  return (
+    <>
+      {contextHolder}
+      <Button onClick={() => toast.success('OK!')}>Thông báo</Button>
+    </>
+  );
+}
 ```
-import { useNavigate } from '@vetc-miniapp/ui-react';
+---
+### Modal / Dialog
-function VehicleItem({ vehicle }) {
-  const navigate = useNavigate();
+```tsx
+import { Modal, useConfirm } from '@vetc-miniapp/ui-react';
+// Controlled modal
+<Modal
+  open={isOpen}
+  title="Xác nhận thanh toán"
+  okText="Thanh toán"
+  cancelText="Hủy"
+  onOk={handlePay}
+  onCancel={() => setOpen(false)}
+>
+  Bạn có chắc muốn thanh toán 50,000đ?
+</Modal>
+// Confirm dialog
+function MyComp() {
+  const { confirm } = useConfirm();
   return (
-    <div onClick={() => navigate('/vehicle-detail', { title: "Chi tiết xe"}, { mode: "replace" })}>
-      {vehicle.name}
-    </div>
+    <Button onClick={() => confirm({
+      title: 'Xóa phương tiện?',
+      content: 'Hành động này không thể hoàn tác.',
+      okDanger: true,
+      onOk: handleDelete,
+    })}>
+      Xóa
+    </Button>
   );
 }
 ```
-## ⚠️ Lưu ý quan trọng
-# ❌ Không dùng react-router-dom
+---
+### Bottom Sheet
+```tsx
+import { BottomSheet } from '@vetc-miniapp/ui-react';
+<BottomSheet
+  open={isOpen}
+  title="Chọn phương thức"
+  onClose={() => setOpen(false)}
+>
+  <ListItem title="Thẻ ngân hàng" arrow onClick={...} />
+  <ListItem title="Ví điện tử" arrow onClick={...} />
+</BottomSheet>
 ```
-// KHÔNG dùng
-import { useNavigate } from 'react-router-dom';
+---
+### NavigationBar (Top Nav)
-Mini app không quản lý history nội bộ.
+```tsx
+import { NavigationBar } from '@vetc-miniapp/ui-react';
+<NavigationBar
+  title="Chi tiết giao dịch"
+  showBack
+  onBack={() => history.back()}
+  actions={[
+    { icon: <ShareIcon />, label: 'Chia sẻ', onClick: handleShare },
+    { icon: <MoreIcon />, label: 'Thêm', onClick: handleMore },
+  ]}
+/>
 ```
-# ❌ Không dùng window.location
+---
+### TabBar (Bottom Nav)
+```tsx
+import { TabBar } from '@vetc-miniapp/ui-react';
+<TabBar
+  activeKey={activeTab}
+  onChange={setActiveTab}
+  items={[
+    { key: 'home',    label: 'Trang chủ', icon: <HomeIcon /> },
+    { key: 'history', label: 'Lịch sử',   icon: <HistoryIcon />, badge: 3 },
+    { key: 'profile', label: 'Tài khoản', icon: <UserIcon /> },
+  ]}
+/>
 ```
-window.location.href = '/about'; // ❌
+---
+## Design Tokens
+```ts
+import { colorAlias, colorGlobal, fontSize, spacing, borderRadius } from '@vetc-miniapp/ui-react';
+// Colors
+colorAlias.brand        // #25a45e
+colorAlias.negative     // #da2c39
+colorAlias.warning      // #ff8c2f
+// Typography
+fontSize.base           // '16px'
+fontSize.sm             // '13px'
+// Spacing
+spacing[16]             // '16px'
+// Border radius
+borderRadius.md         // '8px'
+borderRadius.xl         // '16px'
+borderRadius.pill       // '1000px'
+```
+---
+## Theming
+`VETCProvider` tự động inject Ant Design ConfigProvider với toàn bộ VETC token. Bạn có thể extend theme:
+```tsx
+import { VETCProvider, vetcAntdTheme } from '@vetc-miniapp/ui-react';
+import { ConfigProvider } from 'antd';
+<ConfigProvider theme={{ ...vetcAntdTheme, token: { ...vetcAntdTheme.token, colorPrimary: '#custom' } }}>
+  <App />
+</ConfigProvider>
 ```

package/dist/bridge.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export interface FlutterInAppWebViewBridge {
+    callHandler(handlerName: string, args?: unknown): Promise<unknown>;
+}
+declare global {
+    interface Window {
+        flutter_inappwebview?: FlutterInAppWebViewBridge;
+    }
+}
+export declare const isBrowser: boolean;
+export declare const getBridge: () => FlutterInAppWebViewBridge | null;
+export declare const callHost: <T = unknown>(action: string, payload?: Record<string, unknown>) => Promise<T>;

package/dist/bridge.js ADDED Viewed

@@ -0,0 +1,20 @@
+/* ================= Types ================= */
+/* ================= Runtime helpers ================= */
+export const isBrowser = typeof window !== "undefined";
+export const getBridge = () => {
+    if (!isBrowser || !window.flutter_inappwebview || !window.flutter_inappwebview.callHandler || typeof window.flutter_inappwebview.callHandler != "function") {
+        return null;
+    }
+    return window.flutter_inappwebview;
+};
+/* ================= Core bridge call ================= */
+export const callHost = (action, payload = {}) => {
+    const bridge = getBridge();
+    if (!bridge) {
+        return Promise.resolve({ ok: false, error: "BRIDGE_CALL_FAILED" });
+    }
+    return bridge.callHandler("MiniAppBridge", {
+        action,
+        payload,
+    });
+};

package/dist/components/app.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare function initRouter(config: any): void;
+export declare function getCurrentPage(): any;
+export declare function setCurrentPath(path: any): void;
+export declare function App({ config }: {
+    config: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/app.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { callHost } from "../bridge";
+let routeMap = new Map();
+let currentPath = "/";
+export function initRouter(config) {
+    routeMap = new Map(config.pages.map(p => [p.pathname, p]));
+}
+export function getCurrentPage() {
+    return routeMap.get(currentPath);
+}
+export function setCurrentPath(path) {
+    currentPath = path;
+}
+export function App({ config }) {
+    const [page, setPage] = useState(null);
+    useEffect(() => {
+        initRouter(config);
+        const rawPath = window.location.pathname || "/";
+        const path = rawPath.replace("/miniapp", "") || "/";
+        setCurrentPath(path);
+        let current = getCurrentPage();
+        if (!current) {
+            setCurrentPath("/");
+            current = getCurrentPage();
+        }
+        setPage(current);
+        callHost("registerAppConfig", { config });
+    }, [config]);
+    if (!page)
+        return _jsx("div", {});
+    const Component = page.Component;
+    return _jsx(Component, {});
+}

package/dist/components/avatar/Avatar.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * VETC Avatar — tokenized
+ */
+import React from 'react';
+export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type AvatarShape = 'circle' | 'square';
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    icon?: React.ReactNode;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    id?: string;
+}
+export declare function Avatar({ src, alt, initials, icon, size, shape, color, className, style, onClick, id, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/components/avatar/Avatar.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AntAvatar } from 'antd';
+// Map size token name to CSS var
+const sizeVarMap = {
+    xl: 'var(--vetc-avatar-size-xl)',
+    lg: 'var(--vetc-avatar-size-lg)',
+    md: 'var(--vetc-avatar-size-md)',
+    sm: 'var(--vetc-avatar-size-sm)',
+    xs: 'var(--vetc-avatar-size-xs)',
+};
+// Pixel values needed for antd size prop (numeric)
+const sizePxMap = { xl: 56, lg: 48, md: 40, sm: 32, xs: 24 };
+// Font size scales with avatar size (from Figma)
+const fontSizeMap = {
+    xl: 'var(--vetc-font-size-2xl)',
+    lg: 'var(--vetc-font-size-xl)',
+    md: 'var(--vetc-font-size-base)',
+    sm: 'var(--vetc-font-size-sm)',
+    xs: 'var(--vetc-font-size-2xs)',
+};
+export function Avatar({ src, alt, initials, icon, size = 'md', shape = 'circle', color, className = '', style, onClick, id, }) {
+    return (_jsx("span", { id: id, style: { display: 'inline-flex', flexShrink: 0, width: sizeVarMap[size], height: sizeVarMap[size] }, children: _jsx(AntAvatar, { src: src, alt: alt, icon: !src && !initials ? icon : undefined, size: sizePxMap[size], shape: shape, onClick: onClick, className: `vetc-avatar vetc-avatar--${size} ${className}`, style: {
+                backgroundColor: !src ? (color ?? 'var(--vetc-avatar-bg-default)') : undefined,
+                fontSize: fontSizeMap[size],
+                fontWeight: 'var(--vetc-font-weight-bold)',
+                fontFamily: 'var(--vetc-font-family)',
+                color: 'var(--vetc-avatar-text-color)',
+                cursor: onClick ? 'pointer' : 'default',
+                flexShrink: 0,
+                ...style,
+            }, children: !src && initials ? initials.slice(0, 2).toUpperCase() : undefined }) }));
+}
+export default Avatar;

package/dist/components/avatar/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Avatar } from './Avatar';
2	+ export type { AvatarProps, AvatarSize, AvatarShape } from './Avatar';

package/dist/components/avatar/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { Avatar } from './Avatar';

package/dist/components/bottom-sheet/BottomSheet.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * VETC BottomSheet — tokenized
+ * Figma: Sheet page — 16px top radius, handle bar, slide-up animation
+ */
+import React from 'react';
+export interface BottomSheetProps {
+    open: boolean;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    maskClosable?: boolean;
+    showHandle?: boolean;
+    maxHeight?: string;
+    onClose?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare function BottomSheet({ open, title, children, maskClosable, showHandle, maxHeight, onClose, className, style, id, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+export default BottomSheet;