@vetc-miniapp/ui-react 0.0.24 → 0.0.26

package/dist/bridge.d.ts

@@ -0,0 +1,17 @@
+export interface FlutterInAppWebViewBridge {
+    callHandler(handlerName: string, args?: unknown): Promise<unknown>;
+}
+export interface MiniAppBridge {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    _emit?: (event: string, data?: any) => void;
+}
+declare global {
+    interface Window {
+        flutter_inappwebview?: FlutterInAppWebViewBridge;
+        MiniApp?: MiniAppBridge;
+    }
+}
+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

@@ -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

@@ -0,0 +1,17 @@
+import React from "react";
+interface PageConfig {
+    pathname: string;
+    Component: React.ComponentType<any>;
+    [key: string]: any;
+}
+interface AppConfig {
+    pages: PageConfig[];
+    [key: string]: any;
+}
+export declare function initRouter(config: AppConfig): void;
+export declare function getCurrentPage(): PageConfig | undefined;
+export declare function setCurrentPath(path: string): void;
+export declare function App({ config }: {
+    config: AppConfig;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/app.js

@@ -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() ?? null;
+        if (!current) {
+            setCurrentPath("/");
+            current = getCurrentPage() ?? null;
+        }
+        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

@@ -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

@@ -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.js

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

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

@@ -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;

package/dist/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * VETC BottomSheet — tokenized
+ * Figma: Sheet page — 16px top radius, handle bar, slide-up animation
+ */
+import { useEffect } from 'react';
+export function BottomSheet({ open, title, children, maskClosable = true, showHandle = true, maxHeight = '90vh', onClose, className = '', style, id, }) {
+    // Lock body scroll when open
+    useEffect(() => {
+        document.body.style.overflow = open ? 'hidden' : '';
+        return () => { document.body.style.overflow = ''; };
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "vetc-bottom-sheet-overlay", "aria-hidden": "true", onClick: () => maskClosable && onClose?.(), style: {
+                    position: 'fixed',
+                    inset: 0,
+                    backgroundColor: 'var(--vetc-sheet-overlay)',
+                    zIndex: 1000,
+                    animation: 'vetc-fade-in var(--vetc-transition-base)',
+                } }), _jsxs("div", { id: id, role: "dialog", "aria-modal": "true", className: `vetc-bottom-sheet ${className}`, style: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    backgroundColor: 'var(--vetc-sheet-bg)',
+                    borderRadius: `var(--vetc-sheet-radius) var(--vetc-sheet-radius) 0 0`,
+                    maxHeight,
+                    overflowY: 'auto',
+                    zIndex: 1001,
+                    fontFamily: 'var(--vetc-font-family)',
+                    animation: 'vetc-slide-up var(--vetc-transition-slow) cubic-bezier(0.32, 0.72, 0, 1)',
+                    ...style,
+                }, children: [showHandle && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', paddingTop: 'var(--vetc-space-8)', paddingBottom: 'var(--vetc-space-4)' }, children: _jsx("div", { style: {
+                                width: 'var(--vetc-sheet-handle-width)',
+                                height: 'var(--vetc-sheet-handle-height)',
+                                borderRadius: 'var(--vetc-radius-pill)',
+                                backgroundColor: 'var(--vetc-sheet-handle-color)',
+                            } }) })), title && (_jsxs("div", { style: {
+                            padding: `var(--vetc-space-12) var(--vetc-sheet-padding)`,
+                            borderBottom: `1px solid var(--vetc-sheet-border)`,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }, children: [_jsx("span", { style: {
+                                    fontSize: 'var(--vetc-sheet-title-size)',
+                                    fontWeight: 'var(--vetc-sheet-title-weight)',
+                                    color: 'var(--vetc-sheet-title-color)',
+                                    lineHeight: 'var(--vetc-line-height-relaxed)',
+                                }, children: title }), onClose && (_jsx("button", { onClick: onClose, "aria-label": "\u0110\u00F3ng", style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    padding: 'var(--vetc-space-4)',
+                                    display: 'flex',
+                                    color: 'var(--vetc-color-icon-muted)',
+                                    borderRadius: 'var(--vetc-radius-pill)',
+                                    transition: 'background-color var(--vetc-transition-fast)',
+                                }, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] })), _jsx("div", { style: { padding: 'var(--vetc-sheet-padding)' }, children: children })] }), _jsx("style", { children: `
+        @keyframes vetc-fade-in {
+          from { opacity: 0 }
+          to   { opacity: 1 }
+        }
+        @keyframes vetc-slide-up {
+          from { transform: translateY(100%) }
+          to   { transform: translateY(0) }
+        }
+      ` })] }));
+}
+export default BottomSheet;

package/dist/components/bottom-sheet/index.js

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

package/dist/components/button/Button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * VETC Button Component
+ * Figma: filled/outlined/elevated/ghost styles
+ * Large: h=48px, radius=12px, font=16px/600
+ * Small: h=32px, radius=8px,  font=14px/600
+ * style:   filled | outlined | elevated | ghost | danger | danger-outlined
+ * variant: brand (green) | neutral (gray-90)
+ */
+import React from 'react';
+export type ButtonStyle = 'filled' | 'outlined' | 'elevated' | 'ghost' | 'danger' | 'danger-outlined';
+export type ButtonVariant = 'brand' | 'neutral';
+export type ButtonSize = 'lg' | 'sm';
+export type ButtonShape = 'rounded' | 'pill';
+export interface ButtonProps {
+    style?: ButtonStyle;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    children?: React.ReactNode;
+    htmlType?: 'button' | 'submit' | 'reset';
+    className?: string;
+    css?: React.CSSProperties;
+    id?: string;
+}
+export declare function Button({ style, variant, size, shape, block, disabled, loading, icon, iconRight, onClick, children, htmlType, className, css, id, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/components/button/Button.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * VETC Button Component
+ * Figma: filled/outlined/elevated/ghost styles
+ * Large: h=48px, radius=12px, font=16px/600
+ * Small: h=32px, radius=8px,  font=14px/600
+ * style:   filled | outlined | elevated | ghost | danger | danger-outlined
+ * variant: brand (green) | neutral (gray-90)
+ */
+import { useState } from 'react';
+const BRAND = {
+    filled: {
+        bg: 'var(--vetc-color-brand)',
+        bgHover: 'var(--vetc-color-brand-hover)',
+        bgActive: 'var(--vetc-color-brand-active)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    outlined: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-green-02)',
+        bgActive: 'var(--vetc-green-05)',
+        text: 'var(--vetc-color-brand)',
+        border: 'var(--vetc-color-brand)',
+        shadow: 'none',
+    },
+    elevated: {
+        bg: 'var(--vetc-color-bg)',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-brand)',
+        border: 'transparent',
+        shadow: 'var(--vetc-shadow-md)',
+    },
+    ghost: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-brand)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    danger: {
+        bg: 'var(--vetc-color-negative)',
+        bgHover: 'var(--vetc-red-60)',
+        bgActive: 'var(--vetc-red-60)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    'danger-outlined': {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-red-02)',
+        bgActive: 'var(--vetc-red-05)',
+        text: 'var(--vetc-color-negative)',
+        border: 'var(--vetc-color-negative)',
+        shadow: 'none',
+    },
+};
+const NEUTRAL = {
+    filled: {
+        bg: 'var(--vetc-gray-90)',
+        bgHover: 'var(--vetc-gray-80)',
+        bgActive: 'var(--vetc-gray-70)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    outlined: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-gray-05)',
+        bgActive: 'var(--vetc-gray-10)',
+        text: 'var(--vetc-gray-90)',
+        border: 'var(--vetc-gray-90)',
+        shadow: 'none',
+    },
+    elevated: {
+        bg: 'var(--vetc-color-bg)',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-text-primary)',
+        border: 'transparent',
+        shadow: 'var(--vetc-shadow-md)',
+    },
+    ghost: {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-color-bg-hover)',
+        bgActive: 'var(--vetc-color-bg-pressed)',
+        text: 'var(--vetc-color-text-primary)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    // danger variants are semantic — variant (brand/neutral) has no effect
+    danger: {
+        bg: 'var(--vetc-color-negative)',
+        bgHover: 'var(--vetc-red-60)',
+        bgActive: 'var(--vetc-red-60)',
+        text: 'var(--vetc-white)',
+        border: 'transparent',
+        shadow: 'none',
+    },
+    'danger-outlined': {
+        bg: 'transparent',
+        bgHover: 'var(--vetc-red-02)',
+        bgActive: 'var(--vetc-red-05)',
+        text: 'var(--vetc-color-negative)',
+        border: 'var(--vetc-color-negative)',
+        shadow: 'none',
+    },
+};
+const LoadingSpinner = ({ color }) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { animation: 'vetc-btn-spin 0.6s linear infinite', flexShrink: 0 }, "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", stroke: color, strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M8 2a6 6 0 016 6", stroke: color, strokeWidth: "2", strokeLinecap: "round" })] }));
+export function Button({ style = 'filled', variant = 'brand', size = 'lg', shape = 'rounded', block = false, disabled = false, loading = false, icon, iconRight, onClick, children, htmlType = 'button', className = '', css, id, }) {
+    const [pressed, setPressed] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const tokens = (variant === 'neutral' ? NEUTRAL : BRAND)[style];
+    const isDisabled = disabled || loading;
+    const height = size === 'lg' ? 'var(--vetc-btn-height-lg)' : 'var(--vetc-btn-height-sm)';
+    const fontSize = size === 'lg' ? 'var(--vetc-btn-font-size-lg)' : 'var(--vetc-btn-font-size-sm)';
+    const paddingX = size === 'lg' ? 'var(--vetc-btn-padding-x-lg)' : 'var(--vetc-btn-padding-x-sm)';
+    const radius = shape === 'pill' ? 'var(--vetc-btn-radius-pill)'
+        : size === 'lg' ? 'var(--vetc-btn-radius-lg)'
+            : 'var(--vetc-btn-radius-sm)';
+    let bg = tokens.bg;
+    let border = tokens.border;
+    let shadow = tokens.shadow;
+    if (isDisabled) {
+        bg = 'var(--vetc-btn-disabled-bg)';
+        border = 'var(--vetc-btn-disabled-border)';
+        shadow = 'none';
+    }
+    else if (pressed) {
+        bg = tokens.bgActive;
+    }
+    else if (hovered) {
+        bg = tokens.bgHover;
+    }
+    const textColor = isDisabled ? 'var(--vetc-btn-disabled-text)' : tokens.text;
+    const spinnerColor = isDisabled ? 'var(--vetc-gray-30)' : tokens.text;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { id: id, type: htmlType, disabled: isDisabled, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => { setHovered(false); setPressed(false); }, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), className: `vetc-btn vetc-btn--${style} vetc-btn--${variant} vetc-btn--${size} ${className}`, style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 'var(--vetc-space-8)',
+                    height,
+                    width: block ? '100%' : undefined,
+                    paddingInline: paddingX,
+                    borderRadius: radius,
+                    border: `1px solid ${border}`,
+                    backgroundColor: bg,
+                    boxShadow: shadow,
+                    color: textColor,
+                    fontSize,
+                    fontWeight: 'var(--vetc-btn-font-weight)',
+                    fontFamily: 'var(--vetc-font-family)',
+                    lineHeight: 'var(--vetc-line-height-relaxed)',
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
+                    transition: 'background-color var(--vetc-transition-fast), box-shadow var(--vetc-transition-fast)',
+                    userSelect: 'none',
+                    outline: 'none',
+                    whiteSpace: 'nowrap',
+                    ...css,
+                }, children: [loading ? _jsx(LoadingSpinner, { color: spinnerColor }) : icon && _jsx("span", { style: { display: 'inline-flex', flexShrink: 0 }, children: icon }), children && _jsx("span", { children: children }), iconRight && !loading && _jsx("span", { style: { display: 'inline-flex', flexShrink: 0 }, children: iconRight })] }), _jsx("style", { children: `@keyframes vetc-btn-spin { to { transform: rotate(360deg); } }` })] }));
+}
+export default Button;

package/dist/components/button/index.js

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

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type ButtonGroupLayout = 'inline' | 'stacked';
+export type ButtonGroupVariant = 'bounding' | 'none';
+export interface ButtonGroupAction {
+    label: React.ReactNode;
+    onClick?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface ButtonGroupProps {
+    /** Primary action — brand filled, rightmost (inline) or bottom (stacked). Required. */
+    primary: ButtonGroupAction & {
+        /** danger = red filled style */
+        danger?: boolean;
+        /** Override primary button color. Default: brand */
+        variant?: 'brand' | 'neutral';
+    };
+    /** Secondary actions — neutral outlined. Max 2. */
+    secondary?: ButtonGroupAction[];
+    /** Optional content rendered above the button row */
+    content?: React.ReactNode;
+    /** inline: buttons side by side | stacked: buttons stacked vertically */
+    layout?: ButtonGroupLayout;
+    /** bounding: top border + background | none: no container styling */
+    variant?: ButtonGroupVariant;
+}
+export declare function ButtonGroup({ primary, secondary, content, layout, variant, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/button-group/ButtonGroup.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+export function ButtonGroup({ primary, secondary = [], content, layout = 'inline', variant = 'none', }) {
+    const isInline = layout === 'inline';
+    const isBounding = variant === 'bounding';
+    const containerStyle = isBounding
+        ? {
+            backgroundColor: 'var(--vetc-btn-group-bg)',
+            borderTop: `1px solid var(--vetc-btn-group-border-color)`,
+            padding: 'var(--vetc-btn-group-padding)',
+            fontFamily: 'var(--vetc-font-family)',
+        }
+        : { fontFamily: 'var(--vetc-font-family)' };
+    const rowStyle = isInline
+        ? { display: 'flex', gap: 'var(--vetc-btn-group-gap)', alignItems: 'stretch' }
+        : { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-btn-group-gap)' };
+    const secondaryBtns = secondary.map((action, i) => (_jsx(Button, { style: "outlined", variant: "neutral", block: !isInline, loading: action.loading, disabled: action.disabled, onClick: action.onClick, css: isInline ? { flex: 1 } : undefined, children: action.label }, i)));
+    const primaryBtn = (_jsx(Button, { style: primary.danger ? 'danger' : 'filled', variant: primary.variant ?? 'brand', block: !isInline, loading: primary.loading, disabled: primary.disabled, onClick: primary.onClick, css: isInline ? { flex: 1 } : undefined, children: primary.label }));
+    return (_jsxs("div", { style: containerStyle, children: [content && (_jsx("div", { style: { marginBottom: 'var(--vetc-btn-group-padding)' }, children: content })), _jsx("div", { style: rowStyle, children: isInline ? (_jsxs(_Fragment, { children: [secondaryBtns, primaryBtn] })) : (_jsxs(_Fragment, { children: [primaryBtn, secondaryBtns] })) })] }));
+}
+export default ButtonGroup;

package/dist/components/button-group/index.js

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

package/dist/components/card/Card.d.ts

@@ -0,0 +1,18 @@
+/**
+ * VETC Card — tokenized
+ */
+import React from 'react';
+export type CardElevation = 'flat' | 'raised' | 'outlined';
+export interface CardProps {
+    elevation?: CardElevation;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    id?: string;
+}
+export declare function Card({ elevation, title, extra, children, onClick, className, style, bodyStyle, id, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/components/card/Card.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card as AntCard } from 'antd';
+export function Card({ elevation = 'outlined', title, extra, children, onClick, className = '', style, bodyStyle, id, }) {
+    const shadowMap = {
+        flat: 'var(--vetc-shadow-none)',
+        raised: 'var(--vetc-card-shadow-raised)',
+        outlined: 'var(--vetc-shadow-none)',
+    };
+    const borderMap = {
+        flat: 'none',
+        raised: 'none',
+        outlined: `1px solid var(--vetc-card-border)`,
+    };
+    return (_jsx(AntCard, { id: id, title: title, extra: extra, onClick: onClick, className: `vetc-card vetc-card--${elevation} ${className}`, styles: {
+            body: {
+                padding: 'var(--vetc-card-padding)',
+                fontFamily: 'var(--vetc-font-family)',
+                ...bodyStyle,
+            },
+            header: title
+                ? { borderBottom: `1px solid var(--vetc-card-border)`, padding: `var(--vetc-space-12) var(--vetc-card-padding)` }
+                : undefined,
+        }, style: {
+            borderRadius: 'var(--vetc-card-radius)',
+            border: borderMap[elevation],
+            boxShadow: shadowMap[elevation],
+            cursor: onClick ? 'pointer' : 'default',
+            overflow: 'hidden',
+            backgroundColor: 'var(--vetc-card-bg)',
+            fontFamily: 'var(--vetc-font-family)',
+            transition: `box-shadow var(--vetc-transition-fast)`,
+            ...style,
+        }, children: children }));
+}
+export default Card;

package/dist/components/card/index.js

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

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,41 @@
+/**
+ * VETC Checkbox & CheckboxGroup
+ * Figma: size=20px, touch-area=48px, states: default/hover/pressed/selected/indeterminate/disabled
+ * variant: neutral (gray-90) | brand (green-40)
+ */
+import React from 'react';
+export type CheckboxVariant = 'neutral' | 'brand';
+export interface CheckboxProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    onChange?: (checked: boolean) => void;
+    value?: any;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Checkbox({ label, description, checked, defaultChecked, indeterminate, disabled, variant, onChange, value, id, className, style, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckboxOption {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: any;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    options: CheckboxOption[];
+    value?: any[];
+    defaultValue?: any[];
+    direction?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    onChange?: (values: any[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function CheckboxGroup({ options, value, defaultValue, direction, disabled, variant, onChange, className, style, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export default Checkbox;