@vetc-miniapp/ui-react 0.0.22 → 0.0.24

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

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

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxGroup } from './Checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxOption, CheckboxVariant } from './Checkbox';

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

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

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipStyle, ChipType, ChipShape } from './Chip';

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

@@ -0,0 +1,135 @@
+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/dialog/index.ts

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

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

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

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

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