@vetc-miniapp/ui-react 0.0.24 → 0.0.25

package/src/ui-react/components/checkbox/Checkbox.tsx

@@ -1,232 +0,0 @@
-/**
- * VETC Checkbox & CheckboxGroup
- * Figma: size=20px, touch-area=48px, states: default/hover/pressed/selected/indeterminate/disabled
- * variant: neutral (gray-90) | brand (green-40)
- */
-import React, { useState } from 'react';
-
-export type CheckboxVariant = 'neutral' | 'brand';
-
-export interface CheckboxProps {
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  variant?: CheckboxVariant;
-  onChange?: (checked: boolean) => void;
-  value?: any;
-  id?: string;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const CheckIcon = () => (
-  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" aria-hidden="true">
-    <path d="M1 4L4.5 7.5L11 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-const IndeterminateIcon = () => (
-  <svg width="10" height="2" viewBox="0 0 10 2" fill="none" aria-hidden="true">
-    <path d="M1 1H9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-  </svg>
-);
-
-export function Checkbox({
-  label,
-  description,
-  checked,
-  defaultChecked = false,
-  indeterminate = false,
-  disabled = false,
-  variant = 'brand',
-  onChange,
-  value,
-  id,
-  className = '',
-  style,
-}: CheckboxProps) {
-  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 (
-    <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,
-      }}
-    >
-      <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}
-      />
-
-      {/* Visual box */}
-      <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,
-        }}
-      >
-        {isChecked && !indeterminate && <CheckIcon />}
-        {indeterminate && <IndeterminateIcon />}
-      </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>
-  );
-}
-
-// ── CheckboxGroup ─────────────────────────────────────────────────────────────
-export interface CheckboxOption {
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  value: any;
-  disabled?: boolean;
-}
-
-export interface CheckboxGroupProps {
-  options: CheckboxOption[];
-  value?: any[];
-  defaultValue?: any[];
-  direction?: 'horizontal' | 'vertical';
-  disabled?: boolean;
-  variant?: CheckboxVariant;
-  onChange?: (values: any[]) => void;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export function CheckboxGroup({
-  options,
-  value,
-  defaultValue = [],
-  direction = 'vertical',
-  disabled = false,
-  variant = 'brand',
-  onChange,
-  className = '',
-  style,
-}: CheckboxGroupProps) {
-  const [internalValue, setInternalValue] = useState<any[]>(defaultValue);
-  const isControlled = value !== undefined;
-  const currentValue = isControlled ? value! : internalValue;
-
-  const handleChange = (optValue: any, checked: boolean) => {
-    const next = checked
-      ? [...currentValue, optValue]
-      : currentValue.filter((v) => v !== optValue);
-    if (!isControlled) setInternalValue(next);
-    onChange?.(next);
-  };
-
-  return (
-    <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,
-      }}
-    >
-      {options.map((opt) => (
-        <Checkbox
-          key={String(opt.value)}
-          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)}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default Checkbox;

package/src/ui-react/components/chip/Chip.tsx

@@ -1,137 +0,0 @@
-/**
- * VETC Chip / Tag — tokenized
- * Figma: Chip page (7 types × 3 styles)
- */
-import React from 'react';
-import { Tag as AntTag } from 'antd';
-
-export type ChipStyle = 'filled' | 'outlined' | 'tinted';
-export type ChipType = 'default' | 'brand' | 'positive' | 'negative' | 'warning' | 'info';
-export type ChipShape = 'pill' | 'rounded';
-
-// Map type → CSS vars (from tokens.css --vetc-chip-*)
-const typeVarMap: Record<ChipType, { bg: string; border: string; text: string; filledBg: string }> = {
-  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 interface ChipProps {
-  style?: ChipStyle;
-  type?: ChipType;
-  shape?: ChipShape;
-  size?: 'md' | 'sm';
-  icon?: React.ReactNode;
-  closable?: boolean;
-  onClose?: () => void;
-  onClick?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-  css?: React.CSSProperties;
-  id?: string;
-}
-
-export function Chip({
-  style = 'tinted',
-  type = 'default',
-  shape = 'pill',
-  size = 'md',
-  icon,
-  closable = false,
-  onClose,
-  onClick,
-  children,
-  className = '',
-  css,
-  id,
-}: ChipProps) {
-  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 (
-    <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 as any,
-        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}
-    </AntTag>
-  );
-}
-
-export default Chip;

package/src/ui-react/components/dialog/Dialog.tsx

@@ -1,135 +0,0 @@
-import React, { useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from '../button';
-
-export interface DialogProps {
-  open: boolean;
-  /** Optional image URL shown at the top of the dialog */
-  image?: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  okText?: string;
-  cancelText?: string;
-  okDisabled?: boolean;
-  okLoading?: boolean;
-  okDanger?: boolean;
-  onOk?: () => void;
-  onCancel?: () => void;
-  /** Close dialog when clicking outside (default: true) */
-  maskClosable?: boolean;
-}
-
-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,
-}: DialogProps) {
-  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 createPortal(
-    <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}
-    >
-      <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()}
-      >
-        {image && (
-          <div style={{ width: '100%', height: 'var(--vetc-dialog-image-height)', overflow: 'hidden', flexShrink: 0 }}>
-            <img
-              src={image}
-              alt=""
-              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-            />
-          </div>
-        )}
-
-        {hasContent && (
-          <div style={{ padding: 'var(--vetc-dialog-padding)' }}>
-            {title && (
-              <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,
-              }}>
-                {title}
-              </div>
-            )}
-            {description && (
-              <div style={{
-                fontSize: 'var(--vetc-dialog-desc-size)',
-                color: 'var(--vetc-dialog-desc-color)',
-                lineHeight: 'var(--vetc-line-height-relaxed)',
-              }}>
-                {description}
-              </div>
-            )}
-          </div>
-        )}
-
-        <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)',
-        }}>
-          {onCancel && (
-            <Button block style="outlined" variant="neutral" onClick={onCancel}>
-              {cancelText}
-            </Button>
-          )}
-          <Button
-            block
-            style={okDanger ? 'danger' : 'filled'}
-            loading={okLoading}
-            disabled={okDisabled}
-            onClick={onOk}
-          >
-            {okText}
-          </Button>
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
-export default Dialog;

package/src/ui-react/components/divider/Divider.tsx

@@ -1,54 +0,0 @@
-/**
- * VETC Divider — tokenized
- */
-import React from 'react';
-import { Divider as AntDivider } from 'antd';
-
-export interface DividerProps {
-  orientation?: 'horizontal' | 'vertical';
-  label?: React.ReactNode;
-  labelAlign?: 'left' | 'center' | 'right';
-  thickness?: number;
-  color?: string;
-  margin?: string;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export function Divider({
-  orientation = 'horizontal',
-  label,
-  labelAlign = 'center',
-  thickness = 1,
-  color,
-  margin,
-  className = '',
-  style,
-}: DividerProps) {
-  const isVertical = orientation === 'vertical';
-
-  return (
-    <AntDivider
-      type={isVertical ? 'vertical' : 'horizontal'}
-      orientationMargin={labelAlign !== 'center' ? 0 : undefined}
-      orientation={labelAlign !== 'center' ? labelAlign as any : 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,
-      }}
-    >
-      {label}
-    </AntDivider>
-  );
-}
-
-export default Divider;