@vetc-miniapp/ui-react 0.0.23 → 0.0.25

package/dist/components/chip/Chip.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag as AntTag } from 'antd';
+// Map type → CSS vars (from tokens.css --vetc-chip-*)
+const typeVarMap = {
+    default: {
+        bg: 'var(--vetc-chip-default-bg)',
+        border: 'var(--vetc-chip-default-border)',
+        text: 'var(--vetc-chip-default-text)',
+        filledBg: 'var(--vetc-chip-default-filled-bg)',
+    },
+    brand: {
+        bg: 'var(--vetc-chip-brand-bg)',
+        border: 'var(--vetc-chip-brand-border)',
+        text: 'var(--vetc-chip-brand-text)',
+        filledBg: 'var(--vetc-chip-brand-filled-bg)',
+    },
+    positive: {
+        bg: 'var(--vetc-chip-positive-bg)',
+        border: 'var(--vetc-chip-positive-border)',
+        text: 'var(--vetc-chip-positive-text)',
+        filledBg: 'var(--vetc-chip-positive-filled-bg)',
+    },
+    negative: {
+        bg: 'var(--vetc-chip-negative-bg)',
+        border: 'var(--vetc-chip-negative-border)',
+        text: 'var(--vetc-chip-negative-text)',
+        filledBg: 'var(--vetc-chip-negative-filled-bg)',
+    },
+    warning: {
+        bg: 'var(--vetc-chip-warning-bg)',
+        border: 'var(--vetc-chip-warning-border)',
+        text: 'var(--vetc-chip-warning-text)',
+        filledBg: 'var(--vetc-chip-warning-filled-bg)',
+    },
+    info: {
+        bg: 'var(--vetc-chip-info-bg)',
+        border: 'var(--vetc-chip-info-border)',
+        text: 'var(--vetc-chip-info-text)',
+        filledBg: 'var(--vetc-chip-info-filled-bg)',
+    },
+};
+export function Chip({ style = 'tinted', type = 'default', shape = 'pill', size = 'md', icon, closable = false, onClose, onClick, children, className = '', css, id, }) {
+    const vars = typeVarMap[type];
+    const height = size === 'md' ? 'var(--vetc-chip-height-md)' : 'var(--vetc-chip-height-sm)';
+    const paddingX = size === 'md' ? 'var(--vetc-chip-padding-x-md)' : 'var(--vetc-chip-padding-x-sm)';
+    const fontSize = size === 'md' ? 'var(--vetc-chip-font-size-md)' : 'var(--vetc-chip-font-size-sm)';
+    const fontWeight = 'var(--vetc-chip-font-weight)';
+    const borderRadius = shape === 'pill' ? 'var(--vetc-chip-radius-pill)' : 'var(--vetc-chip-radius-rounded)';
+    let bg = vars.bg;
+    let border = `1px solid ${vars.border}`;
+    let textColor = vars.text;
+    if (style === 'filled') {
+        bg = vars.filledBg;
+        border = 'none';
+        textColor = 'var(--vetc-white)';
+    }
+    else if (style === 'outlined') {
+        bg = 'transparent';
+        border = `1px solid ${vars.border}`;
+        textColor = vars.text;
+    }
+    // tinted: bg + border (default)
+    return (_jsx(AntTag, { id: id, closable: closable, onClose: (e) => { e.preventDefault(); onClose?.(); }, onClick: onClick, icon: icon, className: `vetc-chip vetc-chip--${style} vetc-chip--${type} ${className}`, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            height,
+            padding: `0 ${paddingX}`,
+            borderRadius,
+            background: bg,
+            border,
+            color: textColor,
+            fontSize,
+            fontWeight: fontWeight,
+            fontFamily: 'var(--vetc-font-family)',
+            cursor: onClick ? 'pointer' : 'default',
+            userSelect: 'none',
+            lineHeight: 1,
+            gap: 'var(--vetc-space-4)',
+            transition: 'var(--vetc-transition-fast)',
+            ...css,
+        }, children: children }));
+}
+export default Chip;

package/dist/components/chip/index.d.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipStyle, ChipType, ChipShape } from './Chip';

package/dist/components/chip/index.js

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

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface DialogProps {
+    open: boolean;
+    /** Optional image URL shown at the top of the dialog */
+    image?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    okText?: string;
+    cancelText?: string;
+    okDisabled?: boolean;
+    okLoading?: boolean;
+    okDanger?: boolean;
+    onOk?: () => void;
+    onCancel?: () => void;
+    /** Close dialog when clicking outside (default: true) */
+    maskClosable?: boolean;
+}
+export declare function Dialog({ open, image, title, description, okText, cancelText, okDisabled, okLoading, okDanger, onOk, onCancel, maskClosable, }: DialogProps): React.ReactPortal;
+export default Dialog;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../button';
+export function Dialog({ open, image, title, description, okText = 'Xác nhận', cancelText = 'Hủy', okDisabled = false, okLoading = false, okDanger = false, onOk, onCancel, maskClosable = true, }) {
+    useEffect(() => {
+        if (open)
+            document.body.style.overflow = 'hidden';
+        else
+            document.body.style.overflow = '';
+        return () => { document.body.style.overflow = ''; };
+    }, [open]);
+    if (!open)
+        return null;
+    const hasContent = title || description;
+    return createPortal(_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'var(--vetc-dialog-overlay)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+            padding: '0 var(--vetc-space-24)',
+        }, onClick: maskClosable ? onCancel : undefined, children: _jsxs("div", { style: {
+                width: '100%',
+                maxWidth: 'var(--vetc-dialog-width)',
+                backgroundColor: 'var(--vetc-dialog-bg)',
+                borderRadius: 'var(--vetc-dialog-radius)',
+                overflow: 'hidden',
+                boxShadow: 'var(--vetc-shadow-lg)',
+                fontFamily: 'var(--vetc-font-family)',
+            }, onClick: e => e.stopPropagation(), children: [image && (_jsx("div", { style: { width: '100%', height: 'var(--vetc-dialog-image-height)', overflow: 'hidden', flexShrink: 0 }, children: _jsx("img", { src: image, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }) })), hasContent && (_jsxs("div", { style: { padding: 'var(--vetc-dialog-padding)' }, children: [title && (_jsx("div", { style: {
+                                fontSize: 'var(--vetc-dialog-title-size)',
+                                fontWeight: 'var(--vetc-dialog-title-weight)',
+                                color: 'var(--vetc-color-text-primary)',
+                                lineHeight: 'var(--vetc-line-height-relaxed)',
+                                marginBottom: description ? 'var(--vetc-space-8)' : 0,
+                            }, children: title })), description && (_jsx("div", { style: {
+                                fontSize: 'var(--vetc-dialog-desc-size)',
+                                color: 'var(--vetc-dialog-desc-color)',
+                                lineHeight: 'var(--vetc-line-height-relaxed)',
+                            }, children: description }))] })), _jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 'var(--vetc-dialog-btn-gap)',
+                        padding: hasContent
+                            ? `0 var(--vetc-dialog-padding) var(--vetc-dialog-padding)`
+                            : 'var(--vetc-dialog-padding)',
+                    }, children: [onCancel && (_jsx(Button, { block: true, style: "outlined", variant: "neutral", onClick: onCancel, children: cancelText })), _jsx(Button, { block: true, style: okDanger ? 'danger' : 'filled', loading: okLoading, disabled: okDisabled, onClick: onOk, children: okText })] })] }) }), document.body);
+}
+export default Dialog;

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';

package/dist/components/dialog/index.js

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

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * VETC Divider — tokenized
+ */
+import React from 'react';
+export interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    label?: React.ReactNode;
+    labelAlign?: 'left' | 'center' | 'right';
+    thickness?: number;
+    color?: string;
+    margin?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Divider({ orientation, label, labelAlign, thickness, color, margin, className, style, }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/dist/components/divider/Divider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider as AntDivider } from 'antd';
+export function Divider({ orientation = 'horizontal', label, labelAlign = 'center', thickness = 1, color, margin, className = '', style, }) {
+    const isVertical = orientation === 'vertical';
+    return (_jsx(AntDivider, { type: isVertical ? 'vertical' : 'horizontal', orientationMargin: labelAlign !== 'center' ? 0 : undefined, orientation: labelAlign !== 'center' ? labelAlign : undefined, className: `vetc-divider ${className}`, style: {
+            borderColor: color ?? 'var(--vetc-divider-color)',
+            borderTopWidth: !isVertical ? thickness : undefined,
+            borderLeftWidth: isVertical ? thickness : undefined,
+            margin: margin ?? (isVertical
+                ? `0 var(--vetc-divider-margin-v)`
+                : `var(--vetc-divider-margin-h) 0`),
+            fontFamily: 'var(--vetc-font-family)',
+            fontSize: 'var(--vetc-divider-label-size)',
+            color: 'var(--vetc-divider-label-color)',
+            ...style,
+        }, children: label }));
+}
+export default Divider;

package/dist/components/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';

package/dist/components/divider/index.js

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

package/dist/components/input/Input.d.ts

@@ -0,0 +1,40 @@
+/**
+ * VETC Input / TextField & PasswordInput Components
+ * All style values use CSS custom properties from tokens.css
+ * Figma: Text field page — height 48px, radius 8px, padding-x 12px
+ */
+import React from 'react';
+export type InputStatus = 'default' | 'error' | 'success';
+export interface InputProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    helperText?: string;
+    /** Status affecting border color */
+    status?: InputStatus;
+    /** Error message — sets status=error automatically */
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    maxLength?: number;
+    showCount?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    allowClear?: boolean;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
+    type?: string;
+    id?: string;
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    required?: boolean;
+}
+export declare function Input({ label, placeholder, value, defaultValue, helperText, status, error, disabled, readOnly, maxLength, showCount, prefix, suffix, allowClear, onChange, onFocus, onBlur, onPressEnter, type, id, name, className, style, required, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix' | 'allowClear'> {
+}
+export declare function PasswordInput({ label, placeholder, value, defaultValue, helperText, status, error, disabled, readOnly, maxLength, onChange, onFocus, onBlur, id, name, className, style, required, }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/input/Input.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input as AntInput } from 'antd';
+// ── Shared label/helper sub-components ───────────────────────────────────────
+function FieldLabel({ htmlFor, required, disabled, children }) {
+    return (_jsxs("label", { htmlFor: htmlFor, style: {
+            fontFamily: 'var(--vetc-font-family)',
+            fontSize: 'var(--vetc-input-label-font-size)',
+            fontWeight: 'var(--vetc-input-label-font-weight)',
+            lineHeight: 'var(--vetc-line-height-relaxed)',
+            color: disabled
+                ? 'var(--vetc-color-text-disabled)'
+                : 'var(--vetc-input-label-color)',
+            display: 'block',
+        }, children: [children, required && (_jsx("span", { style: { color: 'var(--vetc-color-negative)', marginLeft: 'var(--vetc-space-2)' }, children: "*" }))] }));
+}
+function HelperText({ color, children }) {
+    return (_jsx("span", { style: {
+            fontFamily: 'var(--vetc-font-family)',
+            fontSize: 'var(--vetc-input-helper-font-size)',
+            lineHeight: 'var(--vetc-line-height-relaxed)',
+            color,
+        }, children: children }));
+}
+const inputFieldStyle = {
+    height: 'var(--vetc-input-height)',
+    borderRadius: 'var(--vetc-input-radius)',
+    paddingInline: 'var(--vetc-input-padding-x)',
+    fontSize: 'var(--vetc-input-font-size)',
+    fontFamily: 'var(--vetc-font-family)',
+};
+export function Input({ label, placeholder, value, defaultValue, helperText, status = 'default', error, disabled = false, readOnly = false, maxLength, showCount = false, prefix, suffix, allowClear = false, onChange, onFocus, onBlur, onPressEnter, type = 'text', id, name, className = '', style, required = false, }) {
+    const hasError = !!error;
+    const resolvedStatus = hasError ? 'error' : status;
+    const antStatus = resolvedStatus === 'error' ? 'error' : undefined;
+    const helperMsg = error ?? helperText;
+    const helperColor = resolvedStatus === 'error'
+        ? 'var(--vetc-input-helper-color-error)'
+        : 'var(--vetc-input-helper-color)';
+    return (_jsxs("div", { className: `vetc-input-wrapper ${className}`, style: { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }, children: [label && _jsx(FieldLabel, { htmlFor: id, required: required, disabled: disabled, children: label }), _jsx(AntInput, { id: id, name: name, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, maxLength: maxLength, showCount: showCount, prefix: prefix, suffix: suffix, allowClear: allowClear, status: antStatus, onChange: (e) => onChange?.(e.target.value, e), onFocus: onFocus, onBlur: onBlur, onPressEnter: onPressEnter, style: inputFieldStyle }), helperMsg && _jsx(HelperText, { color: helperColor, children: helperMsg })] }));
+}
+export function PasswordInput({ label, placeholder, value, defaultValue, helperText, status = 'default', error, disabled = false, readOnly = false, maxLength, onChange, onFocus, onBlur, id, name, className = '', style, required = false, }) {
+    const hasError = !!error;
+    const resolvedStatus = hasError ? 'error' : status;
+    const antStatus = resolvedStatus === 'error' ? 'error' : undefined;
+    const helperMsg = error ?? helperText;
+    const helperColor = hasError
+        ? 'var(--vetc-input-helper-color-error)'
+        : 'var(--vetc-input-helper-color)';
+    return (_jsxs("div", { className: `vetc-input-wrapper ${className ?? ''}`, style: { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }, children: [label && _jsx(FieldLabel, { htmlFor: id, required: required, disabled: disabled, children: label }), _jsx(AntInput.Password, { id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, maxLength: maxLength, status: antStatus, onChange: (e) => onChange?.(e.target.value, e), onFocus: onFocus, onBlur: onBlur, style: inputFieldStyle }), helperMsg && _jsx(HelperText, { color: helperColor, children: helperMsg })] }));
+}
+export default Input;

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input, PasswordInput } from './Input';
+export type { InputProps, PasswordInputProps, InputStatus } from './Input';

package/dist/components/input/index.js

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

package/dist/components/list/List.d.ts

@@ -0,0 +1,31 @@
+/**
+ * VETC List & ListItem — tokenized
+ * Figma: List item page — height 56px, padding-x 16px
+ */
+import React from 'react';
+export interface ListItemProps {
+    leading?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    trailing?: React.ReactNode;
+    /** Show right chevron */
+    arrow?: boolean;
+    /** Bottom divider line */
+    divider?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare function ListItem({ leading, title, description, trailing, arrow, divider, onClick, disabled, className, style, id, }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export interface ListProps<T = any> {
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    bordered?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare function List<T = any>({ items, renderItem, bordered, className, style, id, }: ListProps<T>): import("react/jsx-runtime").JSX.Element;
+export default ListItem;

package/dist/components/list/List.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VETC List & ListItem — tokenized
+ * Figma: List item page — height 56px, padding-x 16px
+ */
+import React from 'react';
+// ── ChevronRight Icon ─────────────────────────────────────────────────────────
+function ChevronRightIcon({ disabled }) {
+    return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M7.5 5L12.5 10L7.5 15", stroke: disabled ? 'var(--vetc-color-icon-disabled)' : 'var(--vetc-color-icon-muted)', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function ListItem({ leading, title, description, trailing, arrow = false, divider = true, onClick, disabled = false, className = '', style, id, }) {
+    const isClickable = !!onClick && !disabled;
+    return (_jsxs("div", { id: id, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, className: `vetc-list-item ${className}`, onClick: !disabled ? onClick : undefined, onKeyDown: isClickable ? (e) => { if (e.key === 'Enter' || e.key === ' ')
+            onClick?.(); } : undefined, style: {
+            display: 'flex',
+            alignItems: 'center',
+            minHeight: 'var(--vetc-list-item-height)',
+            padding: `0 var(--vetc-list-item-padding-x)`,
+            gap: 'var(--vetc-list-item-gap)',
+            cursor: isClickable ? 'pointer' : 'default',
+            borderBottom: divider ? `1px solid var(--vetc-list-item-border)` : 'none',
+            backgroundColor: 'var(--vetc-list-item-bg)',
+            opacity: disabled ? 0.5 : 1,
+            fontFamily: 'var(--vetc-font-family)',
+            transition: `background-color var(--vetc-transition-fast)`,
+            outline: 'none',
+            ...style,
+        }, onMouseEnter: (e) => {
+            if (isClickable)
+                e.currentTarget.style.backgroundColor = 'var(--vetc-list-item-bg-hover)';
+        }, onMouseLeave: (e) => {
+            if (isClickable)
+                e.currentTarget.style.backgroundColor = 'var(--vetc-list-item-bg)';
+        }, children: [leading && (_jsx("div", { style: {
+                    flexShrink: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: 'var(--vetc-list-item-icon-color)',
+                }, children: leading })), _jsxs("div", { style: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)' }, children: [_jsx("span", { style: {
+                            fontSize: 'var(--vetc-list-item-title-size)',
+                            fontWeight: 'var(--vetc-list-item-title-weight)',
+                            color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-list-item-title-color)',
+                            lineHeight: 'var(--vetc-line-height-relaxed)',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: title }), description && (_jsx("span", { style: {
+                            fontSize: 'var(--vetc-list-item-desc-size)',
+                            fontWeight: 'var(--vetc-font-weight-regular)',
+                            color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-list-item-desc-color)',
+                            lineHeight: 'var(--vetc-line-height-relaxed)',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: description }))] }), (trailing || arrow) && (_jsxs("div", { style: {
+                    flexShrink: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 'var(--vetc-space-8)',
+                    color: 'var(--vetc-list-item-icon-color)',
+                }, children: [trailing, arrow && _jsx(ChevronRightIcon, { disabled: disabled })] }))] }));
+}
+export function List({ items, renderItem, bordered = false, className = '', style, id, }) {
+    return (_jsx("div", { id: id, className: `vetc-list ${className}`, style: {
+            border: bordered ? `1px solid var(--vetc-color-border-variant)` : 'none',
+            borderRadius: bordered ? 'var(--vetc-card-radius)' : 0,
+            overflow: 'hidden',
+            backgroundColor: 'var(--vetc-color-bg)',
+            ...style,
+        }, children: items.map((item, index) => (_jsx(React.Fragment, { children: renderItem(item, index) }, index))) }));
+}
+export default ListItem;

package/dist/components/list/index.d.ts

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps } from './List';

package/dist/components/list/index.js

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

package/dist/components/loading/Loading.d.ts

@@ -0,0 +1,28 @@
+/**
+ * VETC Loading — tokenized
+ */
+import React from 'react';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: string;
+    fullscreen?: boolean;
+    tip?: string;
+    children?: React.ReactNode;
+    spinning?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Spinner({ size, color, fullscreen, tip, children, spinning, className, style, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonProps {
+    rows?: number;
+    avatar?: boolean;
+    avatarSize?: number;
+    title?: boolean;
+    loading?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function SkeletonLoader({ rows, avatar, avatarSize, title, loading, className, style, children, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/dist/components/loading/Loading.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spin, Skeleton } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+const spinnerSizeVarMap = {
+    sm: 'var(--vetc-spinner-size-sm)',
+    md: 'var(--vetc-spinner-size-md)',
+    lg: 'var(--vetc-spinner-size-lg)',
+};
+// antd icon needs numeric fontSize — CSS var won't work directly
+const spinnerPxMap = { sm: 16, md: 24, lg: 40 };
+export function Spinner({ size = 'md', color, fullscreen = false, tip, children, spinning = true, className = '', style, }) {
+    const icon = (_jsx(LoadingOutlined, { style: { fontSize: spinnerPxMap[size], color: color ?? 'var(--vetc-spinner-color)' }, spin: true }));
+    if (children) {
+        return (_jsx(Spin, { spinning: spinning, indicator: icon, tip: tip, className: `vetc-spinner ${className}`, style: style, children: children }));
+    }
+    if (fullscreen) {
+        return (_jsx("div", { className: `vetc-spinner-overlay ${className}`, style: {
+                position: 'fixed',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'var(--vetc-color-overlay)',
+                zIndex: 9999,
+                ...style,
+            }, children: _jsx(Spin, { spinning: spinning, indicator: icon, tip: tip }) }));
+    }
+    return (_jsx("div", { className: `vetc-spinner ${className}`, style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...style }, children: _jsx(Spin, { spinning: spinning, indicator: icon, tip: tip }) }));
+}
+export function SkeletonLoader({ rows = 3, avatar = false, avatarSize = 40, title = true, loading = true, className = '', style, children, }) {
+    return (_jsx(Skeleton, { active: true, loading: loading, avatar: avatar ? { size: avatarSize, shape: 'circle' } : false, title: title, paragraph: { rows }, className: `vetc-skeleton ${className}`, style: style, children: children }));
+}
+export default Spinner;

package/dist/components/loading/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner, SkeletonLoader } from './Loading';
+export type { SpinnerProps, SkeletonProps, SpinnerSize } from './Loading';

package/dist/components/loading/index.js

@@ -0,0 +1 @@
+export { Spinner, SkeletonLoader } from './Loading';

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,38 @@
+/**
+ * VETC Modal / Dialog — tokenized
+ * Figma: Dialog page — width 344px, radius 16px, overlay rgba(0,0,0,0.4)
+ */
+import React from 'react';
+export interface ModalProps {
+    open: boolean;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** null = hide footer, undefined = default buttons, ReactNode = custom */
+    footer?: React.ReactNode | null;
+    okText?: string;
+    cancelText?: string;
+    okDisabled?: boolean;
+    okLoading?: boolean;
+    okDanger?: boolean;
+    onOk?: () => void;
+    onCancel?: () => void;
+    maskClosable?: boolean;
+    closable?: boolean;
+    width?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare function Modal({ open, title, children, footer, okText, cancelText, okDisabled, okLoading, okDanger, onOk, onCancel, maskClosable, closable, width, className, style, id, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function useConfirm(): {
+    confirm: (opts: {
+        title: string;
+        content?: React.ReactNode;
+        okText?: string;
+        cancelText?: string;
+        okDanger?: boolean;
+        onOk?: () => void | Promise<void>;
+        onCancel?: () => void;
+    }) => void;
+};
+export default Modal;

package/dist/components/modal/Modal.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal as AntModal } from 'antd';
+/** Shared button style for modal actions */
+const modalBtnStyle = {
+    height: 'var(--vetc-btn-height-lg)',
+    borderRadius: 'var(--vetc-btn-radius-lg)',
+    fontWeight: 'var(--vetc-btn-font-weight)',
+    fontSize: 'var(--vetc-btn-font-size-lg)',
+    fontFamily: 'var(--vetc-font-family)',
+};
+export function Modal({ open, title, children, footer, okText = 'Xác nhận', cancelText = 'Hủy', okDisabled = false, okLoading = false, okDanger = false, onOk, onCancel, maskClosable = true, closable = true, width, className = '', style, id, }) {
+    return (_jsx(AntModal, { open: open, title: title, okText: okText, cancelText: cancelText, okButtonProps: {
+            disabled: okDisabled,
+            loading: okLoading,
+            danger: okDanger,
+            style: modalBtnStyle,
+        }, cancelButtonProps: { style: modalBtnStyle }, footer: footer === null ? null : footer, onOk: onOk, onCancel: onCancel, maskClosable: maskClosable, closable: closable, width: width ?? 'var(--vetc-modal-width)', centered: true, className: `vetc-modal ${className}`, style: { fontFamily: 'var(--vetc-font-family)', ...style }, styles: {
+            header: {
+                padding: `var(--vetc-modal-padding) var(--vetc-modal-padding) 0`,
+                borderBottom: 'none',
+            },
+            body: {
+                padding: `var(--vetc-space-8) var(--vetc-modal-padding) var(--vetc-modal-padding)`,
+            },
+            footer: {
+                padding: `0 var(--vetc-modal-padding) var(--vetc-modal-padding)`,
+                borderTop: 'none',
+            },
+            mask: { backgroundColor: 'var(--vetc-modal-overlay)' },
+        }, children: children }));
+}
+// ── Confirm hook ──────────────────────────────────────────────────────────────
+export function useConfirm() {
+    const confirm = (opts) => {
+        AntModal.confirm({
+            title: opts.title,
+            content: opts.content,
+            okText: opts.okText ?? 'Xác nhận',
+            cancelText: opts.cancelText ?? 'Hủy',
+            okButtonProps: { danger: opts.okDanger, style: { ...modalBtnStyle, height: 40 } },
+            cancelButtonProps: { style: { ...modalBtnStyle, height: 40 } },
+            centered: true,
+            onOk: opts.onOk,
+            onCancel: opts.onCancel,
+            styles: { mask: { backgroundColor: 'var(--vetc-modal-overlay)' } },
+        });
+    };
+    return { confirm };
+}
+export default Modal;

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal, useConfirm } from './Modal';
+export type { ModalProps } from './Modal';

package/dist/components/modal/index.js

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

package/dist/components/navigation-bar/NavigationBar.d.ts

@@ -0,0 +1,44 @@
+/**
+ * VETC NavigationBar — Top navigation bar
+ * Figma: h=56px, title=20px/semibold, icon-btn=32px, padding-x=8px
+ * Variants: back button, close button, action buttons (max 2 right)
+ */
+import React from 'react';
+export interface NavigationBarAction {
+    icon: React.ReactNode;
+    label?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    id?: string;
+}
+export type NavigationBarLeadingType = 'back' | 'close' | 'none';
+export interface NavigationBarProps {
+    title?: React.ReactNode;
+    /** Leading left button type */
+    leading?: NavigationBarLeadingType;
+    /** Custom back/close icon (overrides default) */
+    leadingIcon?: React.ReactNode;
+    onLeadingPress?: () => void;
+    /** Max 2 action buttons on right */
+    actions?: NavigationBarAction[];
+    /** Fully custom left slot (overrides leading) */
+    leftSlot?: React.ReactNode;
+    /** Fully custom right slot (overrides actions) */
+    rightSlot?: React.ReactNode;
+    backgroundColor?: string;
+    divider?: boolean;
+    transparent?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    /** @deprecated use leading="back" + onLeadingPress */
+    showBack?: boolean;
+    /** @deprecated use leadingIcon */
+    backIcon?: React.ReactNode;
+    /** @deprecated use onLeadingPress */
+    onBack?: () => void;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+export declare function NavigationBar({ title, leading, leadingIcon, onLeadingPress, actions, leftSlot, rightSlot, backgroundColor, divider, transparent, className, style, id, showBack, backIcon, onBack, left, right, }: NavigationBarProps): import("react/jsx-runtime").JSX.Element;
+export default NavigationBar;