@vetc-miniapp/ui-react 0.0.26 → 0.0.27

package/dist/components/checkbox/Checkbox.js

@@ -1,94 +0,0 @@
-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

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

package/dist/components/chip/Chip.js

@@ -1,83 +0,0 @@
-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

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

package/dist/components/dialog/Dialog.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 _jsx(_Fragment, { children: 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

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

package/dist/components/divider/Divider.js

@@ -1,18 +0,0 @@
-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

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

package/dist/components/input/Input.js

@@ -1,51 +0,0 @@
-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

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

package/dist/components/list/List.js

@@ -1,72 +0,0 @@
-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

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

package/dist/components/loading/Loading.js

@@ -1,33 +0,0 @@
-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

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

package/dist/components/modal/Modal.js

@@ -1,50 +0,0 @@
-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.js

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

package/dist/components/navigation-bar/NavigationBar.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function BackIcon() {
-    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M15 19L8 12L15 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-function CloseIcon() {
-    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
-}
-const iconBtnStyle = {
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    width: 'var(--vetc-nav-icon-btn-size)',
-    height: 'var(--vetc-nav-icon-btn-size)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 'var(--vetc-radius-pill)',
-    color: 'var(--vetc-nav-icon-color)',
-    flexShrink: 0,
-    padding: 0,
-    transition: 'background-color var(--vetc-transition-fast)',
-};
-export function NavigationBar({ title, leading = 'none', leadingIcon, onLeadingPress, actions = [], leftSlot, rightSlot, backgroundColor, divider = true, transparent = false, className = '', style, id, 
-// deprecated props
-showBack, backIcon, onBack, left, right, }) {
-    // Backward compat
-    const resolvedLeading = showBack ? 'back' : leading;
-    const resolvedLeadingIcon = leadingIcon ?? backIcon;
-    const resolvedOnLeading = onLeadingPress ?? onBack;
-    const renderLeadingButton = () => {
-        if (leftSlot !== undefined || left !== undefined)
-            return leftSlot ?? left;
-        if (resolvedLeading === 'none')
-            return null;
-        const icon = resolvedLeadingIcon ?? (resolvedLeading === 'close' ? _jsx(CloseIcon, {}) : _jsx(BackIcon, {}));
-        const label = resolvedLeading === 'close' ? 'Đóng' : 'Quay lại';
-        return (_jsx("button", { onClick: resolvedOnLeading, style: iconBtnStyle, "aria-label": label, children: icon }));
-    };
-    return (_jsxs("header", { id: id, className: `vetc-nav-bar ${className}`, style: {
-            display: 'flex',
-            alignItems: 'center',
-            height: 'var(--vetc-nav-height)',
-            padding: `0 var(--vetc-nav-padding-x)`,
-            backgroundColor: transparent ? 'transparent' : (backgroundColor ?? 'var(--vetc-nav-bg)'),
-            borderBottom: divider && !transparent ? `1px solid var(--vetc-nav-border)` : 'none',
-            fontFamily: 'var(--vetc-font-family)',
-            position: 'relative',
-            ...style,
-        }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', minWidth: 'var(--vetc-nav-icon-btn-size)', zIndex: 1 }, children: renderLeadingButton() }), title && (_jsx("div", { style: {
-                    position: 'absolute',
-                    left: 0,
-                    right: 0,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    pointerEvents: 'none',
-                }, children: _jsx("span", { style: {
-                        fontSize: 'var(--vetc-nav-title-size)',
-                        fontWeight: 'var(--vetc-nav-title-weight)',
-                        color: 'var(--vetc-nav-title-color)',
-                        lineHeight: 'var(--vetc-line-height-normal)',
-                        maxWidth: '60%',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                    }, children: title }) })), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--vetc-space-4)', marginLeft: 'auto', zIndex: 1 }, children: rightSlot !== undefined || right !== undefined
-                    ? (rightSlot ?? right)
-                    : actions.slice(0, 2).map((action, i) => (_jsx("button", { id: action.id, onClick: action.onClick, disabled: action.disabled, "aria-label": action.label, style: { ...iconBtnStyle, opacity: action.disabled ? 0.4 : 1 }, children: action.icon }, i))) })] }));
-}
-export default NavigationBar;

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

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