@vetc-miniapp/ui-react 0.0.26 → 0.0.28

package/dist/components/radio/Radio.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * VETC Radio & RadioGroup
- * Figma: size=20px, states: default/hover/selected/disabled
- * variant: neutral (gray-90) | brand (green-40)
- */
-import { useState } from 'react';
-export function Radio({ label, description, checked, defaultChecked = 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 handleChange = () => {
-        if (disabled || isChecked)
-            return;
-        if (!isControlled)
-            setInternalChecked(true);
-        onChange?.(true);
-    };
-    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)';
-    const ringColor = disabled
-        ? 'var(--vetc-color-border-disabled)'
-        : isChecked
-            ? (hovered ? accentHover : accentColor)
-            : (hovered ? accentColor : 'var(--vetc-color-border)');
-    const dotColor = disabled ? 'var(--vetc-color-text-disabled)' : accentColor;
-    return (_jsxs("label", { htmlFor: id, className: `vetc-radio ${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: "radio", checked: isChecked, disabled: disabled, value: value, onChange: handleChange, style: { position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' } }), _jsx("span", { "aria-hidden": "true", style: {
-                    width: '20px',
-                    height: '20px',
-                    flexShrink: 0,
-                    borderRadius: '50%',
-                    border: `1.5px solid ${ringColor}`,
-                    backgroundColor: 'transparent',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    transition: 'border-color var(--vetc-transition-fast)',
-                    marginTop: description ? '2px' : 0,
-                }, children: isChecked && (_jsx("span", { style: {
-                        width: '8px',
-                        height: '8px',
-                        borderRadius: '50%',
-                        backgroundColor: dotColor,
-                        flexShrink: 0,
-                    } })) }), (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 RadioGroup({ 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) => {
-        if (!isControlled)
-            setInternalValue(optValue);
-        onChange?.(optValue);
-    };
-    return (_jsx("div", { role: "radiogroup", className: `vetc-radio-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(Radio, { label: opt.label, description: opt.description, checked: currentValue === opt.value, disabled: opt.disabled ?? disabled, variant: variant, value: opt.value, onChange: () => handleChange(opt.value) }, String(opt.value)))) }));
-}
-export default Radio;

package/dist/components/radio/index.js

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

package/dist/components/select/Select.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select as AntSelect } from 'antd';
-export function Select({ label, placeholder, value, defaultValue, options = [], helperText, error, disabled = false, multiple = false, searchable = false, allowClear = false, loading = false, onChange, onSearch, id, className = '', style, required = false, popupMatchSelectWidth = true, }) {
-    const hasError = !!error;
-    const helperMsg = error ?? helperText;
-    const helperColor = hasError
-        ? 'var(--vetc-input-helper-color-error)'
-        : 'var(--vetc-input-helper-color)';
-    return (_jsxs("div", { className: `vetc-select-wrapper ${className}`, style: { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }, children: [label && (_jsxs("label", { htmlFor: id, 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: [label, required && (_jsx("span", { style: { color: 'var(--vetc-color-negative)', marginLeft: 'var(--vetc-space-2)' }, children: "*" }))] })), _jsx(AntSelect, { id: id, value: value, defaultValue: defaultValue, placeholder: placeholder, options: options, disabled: disabled, mode: multiple ? 'multiple' : undefined, showSearch: searchable, allowClear: allowClear, loading: loading, status: hasError ? 'error' : undefined, onChange: onChange, onSearch: onSearch, popupMatchSelectWidth: popupMatchSelectWidth, style: {
-                    height: 'var(--vetc-input-height)',
-                    width: '100%',
-                    fontFamily: 'var(--vetc-font-family)',
-                    fontSize: 'var(--vetc-input-font-size)',
-                } }), helperMsg && (_jsx("span", { style: {
-                    fontFamily: 'var(--vetc-font-family)',
-                    fontSize: 'var(--vetc-input-helper-font-size)',
-                    lineHeight: 'var(--vetc-line-height-relaxed)',
-                    color: helperColor,
-                }, children: helperMsg }))] }));
-}
-export default Select;

package/dist/components/select/index.js

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

package/dist/components/switch/Switch.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * VETC Switch
- * Figma: w=52px h=32px, thumb=28px, ON=brand-green, OFF=gray-30
- * variant: neutral (gray-90 on) | brand (green-40 on)
- */
-import { useState } from 'react';
-export function Switch({ label, description, labelPosition = 'right', checked, defaultChecked = false, disabled = false, loading = false, variant = 'brand', onChange, id, className = '', style, }) {
-    const [internalChecked, setInternalChecked] = useState(defaultChecked);
-    const isControlled = checked !== undefined;
-    const isChecked = isControlled ? checked : internalChecked;
-    const isDisabled = disabled || loading;
-    const handleToggle = () => {
-        if (isDisabled)
-            return;
-        const next = !isChecked;
-        if (!isControlled)
-            setInternalChecked(next);
-        onChange?.(next);
-    };
-    const onColor = variant === 'brand'
-        ? 'var(--vetc-switch-on-bg)'
-        : 'var(--vetc-gray-90)';
-    const trackBg = isDisabled
-        ? 'var(--vetc-color-bg-disabled)'
-        : isChecked
-            ? onColor
-            : 'var(--vetc-switch-off-bg)';
-    const thumbLeft = isChecked ? 'calc(100% - 30px)' : '2px';
-    const switchEl = (_jsxs("button", { id: id, type: "button", role: "switch", "aria-checked": isChecked, disabled: isDisabled, onClick: handleToggle, className: `vetc-switch ${className}`, style: {
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            width: 'var(--vetc-switch-width)',
-            height: 'var(--vetc-switch-height)',
-            borderRadius: 'var(--vetc-radius-pill)',
-            backgroundColor: trackBg,
-            border: 'none',
-            cursor: isDisabled ? 'not-allowed' : 'pointer',
-            padding: 0,
-            flexShrink: 0,
-            transition: 'background-color var(--vetc-transition-fast)',
-            outline: 'none',
-            ...(label || description ? {} : style),
-        }, children: [_jsx("span", { style: {
-                    position: 'absolute',
-                    left: thumbLeft,
-                    width: 'var(--vetc-switch-thumb-size)',
-                    height: 'var(--vetc-switch-thumb-size)',
-                    borderRadius: '50%',
-                    backgroundColor: isDisabled ? 'var(--vetc-gray-20)' : 'var(--vetc-white)',
-                    boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-                    transition: 'left var(--vetc-transition-fast)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }, children: loading && (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { animation: 'vetc-btn-spin 0.6s linear infinite' }, "aria-hidden": "true", children: [_jsx("circle", { cx: "6", cy: "6", r: "4", stroke: "var(--vetc-gray-30)", strokeWidth: "1.5" }), _jsx("path", { d: "M6 2a4 4 0 014 4", stroke: "var(--vetc-color-brand)", strokeWidth: "1.5", strokeLinecap: "round" })] })) }), _jsx("style", { children: `@keyframes vetc-btn-spin { to { transform: rotate(360deg); } }` })] }));
-    if (!label && !description)
-        return switchEl;
-    const labelBlock = (_jsxs("span", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)', flex: 1 }, children: [label && (_jsx("span", { style: {
-                    fontSize: 'var(--vetc-font-size-base)',
-                    fontWeight: 'var(--vetc-font-weight-regular)',
-                    lineHeight: 'var(--vetc-line-height-relaxed)',
-                    color: isDisabled ? '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: isDisabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-secondary)',
-                }, children: description }))] }));
-    return (_jsx("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 'var(--vetc-space-12)',
-            flexDirection: labelPosition === 'left' ? 'row-reverse' : 'row',
-            fontFamily: 'var(--vetc-font-family)',
-            cursor: isDisabled ? 'not-allowed' : 'pointer',
-            ...style,
-        }, onClick: handleToggle, children: labelPosition === 'right' ? (_jsxs(_Fragment, { children: [switchEl, labelBlock] })) : (_jsxs(_Fragment, { children: [labelBlock, switchEl] })) }));
-}
-export default Switch;

package/dist/components/switch/index.js

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

package/dist/components/tab-bar/TabBar.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function TabBar({ items, activeKey, onChange, variant = 'brand', backgroundColor, divider = true, className = '', style, id, }) {
-    const activeColor = variant === 'brand'
-        ? 'var(--vetc-tab-color-active)'
-        : 'var(--vetc-color-text-primary)';
-    return (_jsx("nav", { id: id, className: `vetc-tab-bar ${className}`, style: {
-            display: 'flex',
-            alignItems: 'stretch',
-            height: 'var(--vetc-tab-height)',
-            backgroundColor: backgroundColor ?? 'var(--vetc-tab-bg)',
-            borderTop: divider ? `1px solid var(--vetc-tab-border)` : 'none',
-            fontFamily: 'var(--vetc-font-family)',
-            ...style,
-        }, children: items.map((item) => {
-            const isActive = item.key === activeKey;
-            const color = item.disabled
-                ? 'var(--vetc-tab-color-disabled)'
-                : isActive
-                    ? activeColor
-                    : 'var(--vetc-tab-color-inactive)';
-            return (_jsxs("button", { disabled: item.disabled, onClick: () => !item.disabled && onChange?.(item.key), "aria-current": isActive ? 'page' : undefined, "aria-label": item.label, className: `vetc-tab-bar__item${isActive ? ' vetc-tab-bar__item--active' : ''}`, style: {
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 'var(--vetc-space-2)',
-                    background: 'none',
-                    border: 'none',
-                    cursor: item.disabled ? 'not-allowed' : 'pointer',
-                    padding: `var(--vetc-space-6) 0`,
-                    position: 'relative',
-                    opacity: item.disabled ? 0.5 : 1,
-                    transition: `color var(--vetc-transition-fast)`,
-                    color,
-                }, children: [_jsxs("div", { style: { position: 'relative', display: 'inline-flex' }, children: [_jsx("span", { style: { color, display: 'flex', fontSize: '24px', lineHeight: 1 }, children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && (_jsx("span", { style: {
-                                    position: 'absolute',
-                                    top: 'calc(-1 * var(--vetc-space-4))',
-                                    right: 'calc(-1 * var(--vetc-space-8))',
-                                    minWidth: 'var(--vetc-tab-badge-size)',
-                                    height: 'var(--vetc-tab-badge-size)',
-                                    backgroundColor: 'var(--vetc-tab-badge-bg)',
-                                    borderRadius: 'var(--vetc-radius-pill)',
-                                    fontSize: 'var(--vetc-tab-badge-font-size)',
-                                    fontWeight: 'var(--vetc-font-weight-semibold)',
-                                    color: 'var(--vetc-tab-badge-text)',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    padding: `0 var(--vetc-space-4)`,
-                                    lineHeight: 1,
-                                }, children: item.badge }))] }), _jsx("span", { style: {
-                            fontSize: 'var(--vetc-tab-label-size)',
-                            fontWeight: 'var(--vetc-tab-label-weight)',
-                            color,
-                            lineHeight: 'var(--vetc-line-height-relaxed)',
-                        }, children: item.label })] }, item.key));
-        }) }));
-}
-export default TabBar;

package/dist/components/tab-bar/index.js

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

package/dist/components/textarea/Textarea.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input as AntInput } from 'antd';
-const { TextArea: AntTextArea } = AntInput;
-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: "*" })] }));
-}
-export function Textarea({ label, placeholder, value, defaultValue, helperText, error, disabled = false, readOnly = false, maxLength, showCount = false, rows = 4, autoSize, onChange, onFocus, onBlur, id, name, className = '', style, required = false, }) {
-    const hasError = !!error;
-    const helperMsg = error ?? helperText;
-    const helperColor = hasError
-        ? 'var(--vetc-input-helper-color-error)'
-        : 'var(--vetc-input-helper-color)';
-    return (_jsxs("div", { className: `vetc-textarea-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(AntTextArea, { id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, maxLength: maxLength, showCount: showCount, rows: rows, autoSize: autoSize, status: hasError ? 'error' : undefined, onChange: (e) => onChange?.(e.target.value), onFocus: onFocus, onBlur: onBlur, style: {
-                    borderRadius: 'var(--vetc-input-radius)',
-                    padding: 'var(--vetc-input-padding-x)',
-                    fontSize: 'var(--vetc-input-font-size)',
-                    fontFamily: 'var(--vetc-font-family)',
-                    resize: 'vertical',
-                } }), helperMsg && (_jsx("span", { style: {
-                    fontFamily: 'var(--vetc-font-family)',
-                    fontSize: 'var(--vetc-input-helper-font-size)',
-                    lineHeight: 'var(--vetc-line-height-relaxed)',
-                    color: helperColor,
-                }, children: helperMsg }))] }));
-}
-export default Textarea;

package/dist/components/textarea/index.js

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

package/dist/components/toast/Toast.js

@@ -1,61 +0,0 @@
-import { notification, message } from 'antd';
-/** Shared notification style — references CSS vars */
-const toastStyle = {
-    borderRadius: 'var(--vetc-toast-radius)',
-    fontFamily: 'var(--vetc-font-family)',
-};
-/**
- * Static programmatic toast API
- * Usage: toast.success('Message')
- */
-export const toast = {
-    show(opts) {
-        const { type = 'default', message: msg, description, duration = 3, placement = 'top', icon, onClose, } = opts;
-        if (type === 'default') {
-            message.open({ type: 'info', content: msg, duration, onClose });
-            return;
-        }
-        notification[type]({
-            message: msg,
-            description,
-            duration,
-            placement,
-            icon,
-            onClose,
-            style: toastStyle,
-        });
-    },
-    success: (msg, description) => toast.show({ message: msg, description, type: 'success' }),
-    error: (msg, description) => toast.show({ message: msg, description, type: 'error' }),
-    warning: (msg, description) => toast.show({ message: msg, description, type: 'warning' }),
-    info: (msg, description) => toast.show({ message: msg, description, type: 'info' }),
-};
-/**
- * Hook-based toast — requires VETCProvider (antd App wrapper)
- */
-export function useToast() {
-    const [api, contextHolder] = notification.useNotification();
-    const show = (opts) => {
-        const { type = 'info', message: msg, description, duration = 3, placement = 'top', icon, onClose, } = opts;
-        api[type === 'default' ? 'info' : type]({
-            message: msg,
-            description,
-            duration,
-            placement,
-            icon,
-            onClose,
-            style: toastStyle,
-        });
-    };
-    return {
-        contextHolder,
-        toast: {
-            show,
-            success: (msg, description) => show({ message: msg, description, type: 'success' }),
-            error: (msg, description) => show({ message: msg, description, type: 'error' }),
-            warning: (msg, description) => show({ message: msg, description, type: 'warning' }),
-            info: (msg, description) => show({ message: msg, description, type: 'info' }),
-        },
-    };
-}
-export default toast;

package/dist/components/toast/index.js

@@ -1 +0,0 @@
-export { toast, useToast } from './Toast';

package/dist/components/typography/Typography.js

@@ -1,143 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// ── Typography style map — dùng CSS vars thay vì hardcode ──────────────────
-const styles = {
-    display4xl: {
-        fontSize: 'var(--vetc-font-size-4xl)',
-        fontWeight: 'var(--vetc-font-weight-bold)',
-        lineHeight: 'var(--vetc-line-height-tight)',
-    },
-    display3xl: {
-        fontSize: 'var(--vetc-font-size-3xl)',
-        fontWeight: 'var(--vetc-font-weight-bold)',
-        lineHeight: 'var(--vetc-line-height-tight)',
-    },
-    display2xl: {
-        fontSize: 'var(--vetc-font-size-2xl)',
-        fontWeight: 'var(--vetc-font-weight-bold)',
-        lineHeight: 'var(--vetc-line-height-tight)',
-    },
-    headlineXl: {
-        fontSize: 'var(--vetc-font-size-xl)',
-        fontWeight: 'var(--vetc-font-weight-bold)',
-        lineHeight: 'var(--vetc-line-height-normal)',
-    },
-    headlineLg: {
-        fontSize: 'var(--vetc-font-size-lg)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-normal)',
-    },
-    titleBase: {
-        fontSize: 'var(--vetc-font-size-base)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-sm)',
-    },
-    titleSm: {
-        fontSize: 'var(--vetc-font-size-sm)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-sm)',
-    },
-    labelBase: {
-        fontSize: 'var(--vetc-font-size-base)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-    },
-    labelSm: {
-        fontSize: 'var(--vetc-font-size-sm)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-lg)',
-    },
-    labelXs: {
-        fontSize: 'var(--vetc-font-size-xs)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-lg)',
-    },
-    labelXxs: {
-        fontSize: 'var(--vetc-font-size-2xs)',
-        fontWeight: 'var(--vetc-font-weight-semibold)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-lg)',
-    },
-    bodyBase: {
-        fontSize: 'var(--vetc-font-size-base)',
-        fontWeight: 'var(--vetc-font-weight-regular)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-sm)',
-    },
-    bodySm: {
-        fontSize: 'var(--vetc-font-size-sm)',
-        fontWeight: 'var(--vetc-font-weight-regular)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-md)',
-    },
-    bodyXs: {
-        fontSize: 'var(--vetc-font-size-xs)',
-        fontWeight: 'var(--vetc-font-weight-regular)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-lg)',
-    },
-    body2xs: {
-        fontSize: 'var(--vetc-font-size-2xs)',
-        fontWeight: 'var(--vetc-font-weight-regular)',
-        lineHeight: 'var(--vetc-line-height-relaxed)',
-        letterSpacing: 'var(--vetc-letter-spacing-lg)',
-    },
-};
-const colorMap = {
-    primary: 'var(--vetc-color-text-primary)',
-    secondary: 'var(--vetc-color-text-secondary)',
-    tertiary: 'var(--vetc-color-text-tertiary)',
-    disabled: 'var(--vetc-color-text-disabled)',
-    brand: 'var(--vetc-color-brand)',
-    error: 'var(--vetc-color-text-error)',
-    warning: 'var(--vetc-color-warning)',
-    success: 'var(--vetc-color-positive)',
-    inherit: 'inherit',
-};
-export function Typography({ variant = 'bodyBase', color = 'primary', strikethrough = false, underline = false, truncate = false, lines, as: Tag = 'span', children, className = '', style, id, }) {
-    const variantStyle = styles[variant] ?? styles.bodyBase;
-    const colorValue = colorMap[color];
-    const combinedStyle = {
-        fontFamily: 'var(--vetc-font-family)',
-        margin: 0,
-        padding: 0,
-        ...variantStyle,
-        color: colorValue,
-        textDecoration: strikethrough ? 'line-through' : underline ? 'underline' : 'none',
-        ...(truncate && !lines
-            ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
-            : {}),
-        ...(lines
-            ? {
-                display: '-webkit-box',
-                WebkitLineClamp: lines,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-            }
-            : {}),
-        ...style,
-    };
-    return (_jsx(Tag, { id: id, className: `vetc-text vetc-text--${variant} ${className}`, style: combinedStyle, children: children }));
-}
-// ── Convenience shorthands ──────────────────────────────────────────────────
-export function Display({ level = '2xl', ...props }) {
-    return _jsx(Typography, { ...props, variant: `display${level}`, as: props.as ?? 'h1' });
-}
-export function Headline({ level = 'xl', ...props }) {
-    return _jsx(Typography, { ...props, variant: level === 'xl' ? 'headlineXl' : 'headlineLg', as: props.as ?? 'h2' });
-}
-export function Title({ size = 'base', ...props }) {
-    return _jsx(Typography, { ...props, variant: size === 'base' ? 'titleBase' : 'titleSm', as: props.as ?? 'h3' });
-}
-export function Label({ size = 'base', ...props }) {
-    const variantMap = { base: 'labelBase', sm: 'labelSm', xs: 'labelXs', xxs: 'labelXxs' };
-    return _jsx(Typography, { ...props, variant: variantMap[size], as: props.as ?? 'span' });
-}
-export function Body({ size = 'base', ...props }) {
-    const variantMap = { base: 'bodyBase', sm: 'bodySm', xs: 'bodyXs', '2xs': 'body2xs' };
-    return _jsx(Typography, { ...props, variant: variantMap[size], as: props.as ?? 'p' });
-}
-export default Typography;

package/dist/components/typography/index.js

@@ -1 +0,0 @@
-export { Typography, Display, Headline, Title, Label, Body } from './Typography';

package/dist/hooks/use-app-pause.js

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * useAppPause — trigger khi Native App đi vào background.
- */
-export function useAppPause(callback) {
-    const savedCallback = useRef(callback);
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        if (typeof window === "undefined" || !window.MiniApp)
-            return;
-        const bridge = window.MiniApp;
-        const handler = () => {
-            try {
-                savedCallback.current?.();
-            }
-            catch (err) {
-                console.error("[useAppPause error]", err);
-            }
-        };
-        bridge.on("appPause", handler);
-        return () => bridge.off("appPause", handler);
-    }, []);
-}

package/dist/hooks/use-app-resume.js

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * useAppResume — trigger khi Native App quay lại foreground.
- */
-export function useAppResume(callback) {
-    const savedCallback = useRef(callback);
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        if (typeof window === "undefined" || !window.MiniApp)
-            return;
-        const bridge = window.MiniApp;
-        const handler = () => {
-            try {
-                savedCallback.current?.();
-            }
-            catch (err) {
-                console.error("[useAppResume error]", err);
-            }
-        };
-        bridge.on("appResume", handler);
-        return () => bridge.off("appResume", handler);
-    }, []);
-}

package/dist/hooks/use-app-state.js

@@ -1 +0,0 @@
-export {};

package/dist/hooks/use-did-hide.js

@@ -1,20 +0,0 @@
-import { useEffect, useRef } from "react";
-export function useDidHide(route, callback) {
-    const saved = useRef(callback);
-    // luôn giữ callback mới nhất
-    useEffect(() => {
-        saved.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        if (typeof window === "undefined" || !window.MiniApp)
-            return;
-        const bridge = window.MiniApp;
-        const handler = (data) => {
-            if (data?.route === route) {
-                saved.current?.(data);
-            }
-        };
-        bridge.on("didHide", handler);
-        return () => bridge.off("didHide", handler);
-    }, [route]);
-}

package/dist/hooks/use-did-show.js

@@ -1,20 +0,0 @@
-import { useEffect, useRef } from "react";
-export function useDidShow(route, callback) {
-    const saved = useRef(callback);
-    // luôn giữ callback mới nhất
-    useEffect(() => {
-        saved.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        if (typeof window === "undefined" || !window.MiniApp)
-            return;
-        const bridge = window.MiniApp;
-        const handler = (data) => {
-            if (data?.route === route) {
-                saved.current?.(data);
-            }
-        };
-        bridge.on("didShow", handler);
-        return () => bridge.off("didShow", handler);
-    }, [route]);
-}

package/dist/hooks/use-listener-scan-qr.js

@@ -1,25 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * useListenerScanQr — lắng nghe kết quả scan QR từ Native.
- */
-export function useListenerScanQr(callback) {
-    const savedCallback = useRef(callback);
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        if (typeof window === "undefined" || !window.MiniApp)
-            return;
-        const bridge = window.MiniApp;
-        const handler = (data) => {
-            try {
-                savedCallback.current?.(data);
-            }
-            catch (err) {
-                console.error("[useListenerScanQr error]", err);
-            }
-        };
-        bridge.on("scanQrResult", handler);
-        return () => bridge.off("scanQrResult", handler);
-    }, []);
-}