@vetc-miniapp/ui-react 0.0.23 → 0.0.24

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

@@ -0,0 +1,188 @@
+/**
+ * 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/navigation-bar/index.ts

@@ -0,0 +1,2 @@
+export { NavigationBar } from './NavigationBar';
+export type { NavigationBarProps, NavigationBarAction } from './NavigationBar';

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

@@ -0,0 +1,216 @@
+/**
+ * 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/radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioGroupProps, RadioOption, RadioVariant } from './Radio';

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

@@ -0,0 +1,109 @@
+/**
+ * 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/select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';

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

@@ -0,0 +1,164 @@
+/**
+ * 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;

package/src/ui-react/components/switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchVariant } from './Switch';