@vetc-miniapp/ui-react 0.0.24 → 0.0.26

package/src/ui-react/components/navigation-bar/NavigationBar.tsx

@@ -1,188 +0,0 @@
-/**
- * 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;
-}
-
-function BackIcon() {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-      <path d="M15 19L8 12L15 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-const iconBtnStyle: React.CSSProperties = {
-  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,
-}: NavigationBarProps) {
-  // Backward compat
-  const resolvedLeading: NavigationBarLeadingType = 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' ? <CloseIcon /> : <BackIcon />);
-    const label = resolvedLeading === 'close' ? 'Đóng' : 'Quay lại';
-
-    return (
-      <button onClick={resolvedOnLeading} style={iconBtnStyle} aria-label={label}>
-        {icon}
-      </button>
-    );
-  };
-
-  return (
-    <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,
-      }}
-    >
-      {/* Left zone — always occupies space to keep title centered */}
-      <div style={{ display: 'flex', alignItems: 'center', minWidth: 'var(--vetc-nav-icon-btn-size)', zIndex: 1 }}>
-        {renderLeadingButton()}
-      </div>
-
-      {/* Title — absolutely centered in the full bar */}
-      {title && (
-        <div style={{
-          position:       'absolute',
-          left:           0,
-          right:          0,
-          display:        'flex',
-          alignItems:     'center',
-          justifyContent: 'center',
-          pointerEvents:  'none',
-        }}>
-          <span style={{
-            fontSize:     'var(--vetc-nav-title-size)',
-            fontWeight:   'var(--vetc-nav-title-weight)' as any,
-            color:        'var(--vetc-nav-title-color)',
-            lineHeight:   'var(--vetc-line-height-normal)',
-            maxWidth:     '60%',
-            overflow:     'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace:   'nowrap',
-          }}>
-            {title}
-          </span>
-        </div>
-      )}
-
-      {/* Right zone */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--vetc-space-4)', marginLeft: 'auto', zIndex: 1 }}>
-        {rightSlot !== undefined || right !== undefined
-          ? (rightSlot ?? right)
-          : actions.slice(0, 2).map((action, i) => (
-              <button
-                key={i}
-                id={action.id}
-                onClick={action.onClick}
-                disabled={action.disabled}
-                aria-label={action.label}
-                style={{ ...iconBtnStyle, opacity: action.disabled ? 0.4 : 1 }}
-              >
-                {action.icon}
-              </button>
-            ))
-        }
-      </div>
-    </header>
-  );
-}
-
-export default NavigationBar;

package/src/ui-react/components/radio/Radio.tsx

@@ -1,216 +0,0 @@
-/**
- * VETC Radio & RadioGroup
- * Figma: size=20px, states: default/hover/selected/disabled
- * variant: neutral (gray-90) | brand (green-40)
- */
-import React, { useState } 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 function Radio({
-  label,
-  description,
-  checked,
-  defaultChecked = false,
-  disabled = false,
-  variant = 'brand',
-  onChange,
-  value,
-  id,
-  className = '',
-  style,
-}: RadioProps) {
-  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 (
-    <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,
-      }}
-    >
-      <input
-        id={id}
-        type="radio"
-        checked={isChecked}
-        disabled={disabled}
-        value={value}
-        onChange={handleChange}
-        style={{ position: 'absolute', opacity: 0, width: 0, height: 0, pointerEvents: 'none' }}
-      />
-
-      {/* Visual radio ring */}
-      <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,
-        }}
-      >
-        {isChecked && (
-          <span style={{
-            width:           '8px',
-            height:          '8px',
-            borderRadius:    '50%',
-            backgroundColor: dotColor,
-            flexShrink:      0,
-          }} />
-        )}
-      </span>
-
-      {/* Label + description */}
-      {(label || description) && (
-        <span style={{ display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)' }}>
-          {label && (
-            <span style={{
-              fontSize:   'var(--vetc-font-size-base)',
-              fontWeight: 'var(--vetc-font-weight-regular)' as any,
-              lineHeight: 'var(--vetc-line-height-relaxed)',
-              color:      disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-primary)',
-            }}>
-              {label}
-            </span>
-          )}
-          {description && (
-            <span style={{
-              fontSize:   'var(--vetc-font-size-sm)',
-              fontWeight: 'var(--vetc-font-weight-regular)' as any,
-              lineHeight: 'var(--vetc-line-height-relaxed)',
-              color:      disabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-secondary)',
-            }}>
-              {description}
-            </span>
-          )}
-        </span>
-      )}
-    </label>
-  );
-}
-
-// ── RadioGroup ────────────────────────────────────────────────────────────────
-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 function RadioGroup({
-  options,
-  value,
-  defaultValue,
-  direction = 'vertical',
-  disabled = false,
-  variant = 'brand',
-  onChange,
-  className = '',
-  style,
-}: RadioGroupProps) {
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const isControlled  = value !== undefined;
-  const currentValue  = isControlled ? value : internalValue;
-
-  const handleChange = (optValue: any) => {
-    if (!isControlled) setInternalValue(optValue);
-    onChange?.(optValue);
-  };
-
-  return (
-    <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,
-      }}
-    >
-      {options.map((opt) => (
-        <Radio
-          key={String(opt.value)}
-          label={opt.label}
-          description={opt.description}
-          checked={currentValue === opt.value}
-          disabled={opt.disabled ?? disabled}
-          variant={variant}
-          value={opt.value}
-          onChange={() => handleChange(opt.value)}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default Radio;

package/src/ui-react/components/select/Select.tsx

@@ -1,109 +0,0 @@
-/**
- * VETC Select — tokenized
- */
-import React from 'react';
-import { Select as AntSelect } from 'antd';
-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 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,
-}: SelectProps) {
-  const hasError = !!error;
-  const helperMsg = error ?? helperText;
-  const helperColor = hasError
-    ? 'var(--vetc-input-helper-color-error)'
-    : 'var(--vetc-input-helper-color)';
-
-  return (
-    <div
-      className={`vetc-select-wrapper ${className}`}
-      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--vetc-input-gap)', ...style }}
-    >
-      {label && (
-        <label
-          htmlFor={id}
-          style={{
-            fontFamily:  'var(--vetc-font-family)',
-            fontSize:    'var(--vetc-input-label-font-size)',
-            fontWeight:  'var(--vetc-input-label-font-weight)' as any,
-            lineHeight:  'var(--vetc-line-height-relaxed)',
-            color: disabled
-              ? 'var(--vetc-color-text-disabled)'
-              : 'var(--vetc-input-label-color)',
-            display: 'block',
-          }}
-        >
-          {label}
-          {required && (
-            <span style={{ color: 'var(--vetc-color-negative)', marginLeft: 'var(--vetc-space-2)' }}>*</span>
-          )}
-        </label>
-      )}
-
-      <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 && (
-        <span style={{
-          fontFamily: 'var(--vetc-font-family)',
-          fontSize:   'var(--vetc-input-helper-font-size)',
-          lineHeight: 'var(--vetc-line-height-relaxed)',
-          color:      helperColor,
-        }}>
-          {helperMsg}
-        </span>
-      )}
-    </div>
-  );
-}
-
-export default Select;

package/src/ui-react/components/switch/Switch.tsx

@@ -1,164 +0,0 @@
-/**
- * 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, { useState } 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 function Switch({
-  label,
-  description,
-  labelPosition = 'right',
-  checked,
-  defaultChecked = false,
-  disabled = false,
-  loading = false,
-  variant = 'brand',
-  onChange,
-  id,
-  className = '',
-  style,
-}: SwitchProps) {
-  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 = (
-    <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),
-      }}
-    >
-      {/* Thumb */}
-      <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',
-      }}>
-        {loading && (
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ animation: 'vetc-btn-spin 0.6s linear infinite' }} aria-hidden="true">
-            <circle cx="6" cy="6" r="4" stroke="var(--vetc-gray-30)" strokeWidth="1.5" />
-            <path d="M6 2a4 4 0 014 4" stroke="var(--vetc-color-brand)" strokeWidth="1.5" strokeLinecap="round" />
-          </svg>
-        )}
-      </span>
-      <style>{`@keyframes vetc-btn-spin { to { transform: rotate(360deg); } }`}</style>
-    </button>
-  );
-
-  if (!label && !description) return switchEl;
-
-  const labelBlock = (
-    <span style={{ display: 'flex', flexDirection: 'column', gap: 'var(--vetc-space-2)', flex: 1 }}>
-      {label && (
-        <span style={{
-          fontSize:   'var(--vetc-font-size-base)',
-          fontWeight: 'var(--vetc-font-weight-regular)' as any,
-          lineHeight: 'var(--vetc-line-height-relaxed)',
-          color:      isDisabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-primary)',
-        }}>
-          {label}
-        </span>
-      )}
-      {description && (
-        <span style={{
-          fontSize:   'var(--vetc-font-size-sm)',
-          fontWeight: 'var(--vetc-font-weight-regular)' as any,
-          lineHeight: 'var(--vetc-line-height-relaxed)',
-          color:      isDisabled ? 'var(--vetc-color-text-disabled)' : 'var(--vetc-color-text-secondary)',
-        }}>
-          {description}
-        </span>
-      )}
-    </span>
-  );
-
-  return (
-    <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}
-    >
-      {labelPosition === 'right' ? (
-        <>{switchEl}{labelBlock}</>
-      ) : (
-        <>{labelBlock}{switchEl}</>
-      )}
-    </div>
-  );
-}
-
-export default Switch;