@vetc-miniapp/ui-react 0.0.24 → 0.0.25

package/dist/components/modal/Modal.js

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

package/dist/components/modal/index.js

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

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

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

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

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

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

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,40 @@
+/**
+ * VETC Radio & RadioGroup
+ * Figma: size=20px, states: default/hover/selected/disabled
+ * variant: neutral (gray-90) | brand (green-40)
+ */
+import React from 'react';
+export type RadioVariant = 'neutral' | 'brand';
+export interface RadioProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    variant?: RadioVariant;
+    onChange?: (checked: boolean) => void;
+    value?: any;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Radio({ label, description, checked, defaultChecked, disabled, variant, onChange, value, id, className, style, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioOption {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: any;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    options: RadioOption[];
+    value?: any;
+    defaultValue?: any;
+    direction?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    variant?: RadioVariant;
+    onChange?: (value: any) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function RadioGroup({ options, value, defaultValue, direction, disabled, variant, onChange, className, style, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/dist/components/radio/Radio.js

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

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

package/dist/components/select/Select.d.ts

@@ -0,0 +1,29 @@
+/**
+ * VETC Select — tokenized
+ */
+import React from 'react';
+import type { DefaultOptionType } from 'antd/es/select';
+export type SelectOption = DefaultOptionType;
+export interface SelectProps {
+    label?: string;
+    placeholder?: string;
+    value?: string | string[] | number | number[];
+    defaultValue?: string | string[] | number | number[];
+    options?: SelectOption[];
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    searchable?: boolean;
+    allowClear?: boolean;
+    loading?: boolean;
+    onChange?: (value: any, option: any) => void;
+    onSearch?: (value: string) => void;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    required?: boolean;
+    popupMatchSelectWidth?: boolean;
+}
+export declare function Select({ label, placeholder, value, defaultValue, options, helperText, error, disabled, multiple, searchable, allowClear, loading, onChange, onSearch, id, className, style, required, popupMatchSelectWidth, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/select/Select.js

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

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

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 React from 'react';
+export type SwitchVariant = 'neutral' | 'brand';
+export interface SwitchProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    labelPosition?: 'left' | 'right';
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    variant?: SwitchVariant;
+    onChange?: (checked: boolean) => void;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Switch({ label, description, labelPosition, checked, defaultChecked, disabled, loading, variant, onChange, id, className, style, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/dist/components/switch/Switch.js

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

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

package/dist/components/tab-bar/TabBar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * VETC TabBar (Bottom Navigation)
+ * Figma: h=56px, label=12px/semibold, icon=24px
+ * variant: neutral (gray-90 active) | brand (green-40 active)
+ */
+import React from 'react';
+export interface TabBarItem {
+    key: string;
+    label: string;
+    icon: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    badge?: number | string;
+    disabled?: boolean;
+}
+export type TabBarVariant = 'neutral' | 'brand';
+export interface TabBarProps {
+    items: TabBarItem[];
+    activeKey?: string;
+    onChange?: (key: string) => void;
+    variant?: TabBarVariant;
+    backgroundColor?: string;
+    divider?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare function TabBar({ items, activeKey, onChange, variant, backgroundColor, divider, className, style, id, }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+export default TabBar;

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

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

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

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,31 @@
+/**
+ * VETC Textarea — tokenized
+ */
+import React from 'react';
+export interface TextareaProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    maxLength?: number;
+    showCount?: boolean;
+    rows?: number;
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    onChange?: (value: string) => void;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    id?: string;
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    required?: boolean;
+}
+export declare function Textarea({ label, placeholder, value, defaultValue, helperText, error, disabled, readOnly, maxLength, showCount, rows, autoSize, onChange, onFocus, onBlur, id, name, className, style, required, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export default Textarea;

package/dist/components/textarea/Textarea.js

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

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