@vetc-miniapp/ui-react 0.0.24 → 0.0.25

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VETC Checkbox & CheckboxGroup
+ * Figma: size=20px, touch-area=48px, states: default/hover/pressed/selected/indeterminate/disabled
+ * variant: neutral (gray-90) | brand (green-40)
+ */
+import { useState } from 'react';
+const CheckIcon = () => (_jsx("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M1 4L4.5 7.5L11 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const IndeterminateIcon = () => (_jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M1 1H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+export function Checkbox({ label, description, checked, defaultChecked = false, indeterminate = false, disabled = false, variant = 'brand', onChange, value, id, className = '', style, }) {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const [hovered, setHovered] = useState(false);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : internalChecked;
+    const isActive = isChecked || indeterminate;
+    const handleChange = () => {
+        if (disabled)
+            return;
+        const next = !isChecked;
+        if (!isControlled)
+            setInternalChecked(next);
+        onChange?.(next);
+    };
+    const accentColor = variant === 'brand'
+        ? 'var(--vetc-color-brand)'
+        : 'var(--vetc-gray-90)';
+    const accentHover = variant === 'brand'
+        ? 'var(--vetc-color-brand-hover)'
+        : 'var(--vetc-gray-70)';
+    let boxBg = 'transparent';
+    let boxBorder = disabled ? 'var(--vetc-color-border-disabled)' : hovered ? accentColor : 'var(--vetc-color-border)';
+    let iconColor = 'var(--vetc-white)';
+    if (isActive) {
+        boxBg = disabled ? 'var(--vetc-color-bg-disabled)' : accentColor;
+        boxBorder = disabled ? 'var(--vetc-color-border-disabled)' : hovered ? accentHover : accentColor;
+        iconColor = disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-white)';
+        if (disabled)
+            boxBg = 'var(--vetc-color-bg-disabled)';
+    }
+    return (_jsxs("label", { htmlFor: id, className: `vetc-checkbox ${className}`, onMouseEnter: () => !disabled && setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            display: 'inline-flex',
+            alignItems: description ? 'flex-start' : 'center',
+            gap: 'var(--vetc-space-12)',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            userSelect: 'none',
+            fontFamily: 'var(--vetc-font-family)',
+            ...style,
+        }, children: [_jsx("input", { id: id, type: "checkbox", checked: isChecked, disabled: disabled, value: value, onChange: handleChange, style: { position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }, "aria-checked": indeterminate ? 'mixed' : isChecked }), _jsxs("span", { "aria-hidden": "true", style: {
+                    width: '20px',
+                    height: '20px',
+                    flexShrink: 0,
+                    borderRadius: 'var(--vetc-radius-xs)',
+                    border: `1.5px solid ${boxBorder}`,
+                    backgroundColor: boxBg,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'background-color var(--vetc-transition-fast), border-color var(--vetc-transition-fast)',
+                    color: iconColor,
+                    marginTop: description ? '2px' : 0,
+                }, children: [isChecked && !indeterminate && _jsx(CheckIcon, {}), indeterminate && _jsx(IndeterminateIcon, {})] }), (label || description) && (_jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)' }, children: [label && (_jsx("span", { style: {
+                            fontSize: 'var(--vetc-font-size-base)',
+                            fontWeight: 'var(--vetc-font-weight-regular)',
+                            lineHeight: 'var(--vetc-line-height-relaxed)',
+                            color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-primary)',
+                        }, children: label })), description && (_jsx("span", { style: {
+                            fontSize: 'var(--vetc-font-size-sm)',
+                            fontWeight: 'var(--vetc-font-weight-regular)',
+                            lineHeight: 'var(--vetc-line-height-relaxed)',
+                            color: disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-secondary)',
+                        }, children: description }))] }))] }));
+}
+export function CheckboxGroup({ options, value, defaultValue = [], direction = 'vertical', disabled = false, variant = 'brand', onChange, className = '', style, }) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const handleChange = (optValue, checked) => {
+        const next = checked
+            ? [...currentValue, optValue]
+            : currentValue.filter((v) => v !== optValue);
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    return (_jsx("div", { className: `vetc-checkbox-group ${className}`, style: {
+            display: 'flex',
+            flexDirection: direction === 'vertical' ? 'column' : 'row',
+            flexWrap: direction === 'horizontal' ? 'wrap' : undefined,
+            gap: direction === 'vertical' ? 'var(--vetc-space-12)' : 'var(--vetc-space-16)',
+            fontFamily: 'var(--vetc-font-family)',
+            ...style,
+        }, children: options.map((opt) => (_jsx(Checkbox, { label: opt.label, description: opt.description, checked: currentValue.includes(opt.value), disabled: opt.disabled ?? disabled, variant: variant, value: opt.value, onChange: (chk) => handleChange(opt.value, chk) }, String(opt.value)))) }));
+}
+export default Checkbox;

package/dist/components/checkbox/index.js

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

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

@@ -0,0 +1,24 @@
+/**
+ * VETC Chip / Tag — tokenized
+ * Figma: Chip page (7 types × 3 styles)
+ */
+import React from 'react';
+export type ChipStyle = 'filled' | 'outlined' | 'tinted';
+export type ChipType = 'default' | 'brand' | 'positive' | 'negative' | 'warning' | 'info';
+export type ChipShape = 'pill' | 'rounded';
+export interface ChipProps {
+    style?: ChipStyle;
+    type?: ChipType;
+    shape?: ChipShape;
+    size?: 'md' | 'sm';
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    css?: React.CSSProperties;
+    id?: string;
+}
+export declare function Chip({ style, type, shape, size, icon, closable, onClose, onClick, children, className, css, id, }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export default Chip;

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