@vetc-miniapp/ui-react 0.0.24 → 0.0.25

package/src/ui-react/components/bottom-sheet/BottomSheet.tsx

@@ -1,149 +0,0 @@
-/**
- * VETC BottomSheet — tokenized
- * Figma: Sheet page — 16px top radius, handle bar, slide-up animation
- */
-import React, { useEffect } from 'react';
-
-export interface BottomSheetProps {
-  open: boolean;
-  title?: React.ReactNode;
-  children?: React.ReactNode;
-  maskClosable?: boolean;
-  showHandle?: boolean;
-  maxHeight?: string;
-  onClose?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-  id?: string;
-}
-
-export function BottomSheet({
-  open,
-  title,
-  children,
-  maskClosable = true,
-  showHandle = true,
-  maxHeight = '90vh',
-  onClose,
-  className = '',
-  style,
-  id,
-}: BottomSheetProps) {
-  // Lock body scroll when open
-  useEffect(() => {
-    document.body.style.overflow = open ? 'hidden' : '';
-    return () => { document.body.style.overflow = ''; };
-  }, [open]);
-
-  if (!open) return null;
-
-  return (
-    <>
-      {/* Overlay */}
-      <div
-        className="vetc-bottom-sheet-overlay"
-        aria-hidden="true"
-        onClick={() => maskClosable && onClose?.()}
-        style={{
-          position:        'fixed',
-          inset:           0,
-          backgroundColor: 'var(--vetc-sheet-overlay)',
-          zIndex:          1000,
-          animation:       'vetc-fade-in var(--vetc-transition-base)',
-        }}
-      />
-
-      {/* Sheet panel */}
-      <div
-        id={id}
-        role="dialog"
-        aria-modal="true"
-        className={`vetc-bottom-sheet ${className}`}
-        style={{
-          position:        'fixed',
-          bottom:          0,
-          left:            0,
-          right:           0,
-          backgroundColor: 'var(--vetc-sheet-bg)',
-          borderRadius:    `var(--vetc-sheet-radius) var(--vetc-sheet-radius) 0 0`,
-          maxHeight,
-          overflowY:       'auto',
-          zIndex:          1001,
-          fontFamily:      'var(--vetc-font-family)',
-          animation:       'vetc-slide-up var(--vetc-transition-slow) cubic-bezier(0.32, 0.72, 0, 1)',
-          ...style,
-        }}
-      >
-        {/* Handle bar */}
-        {showHandle && (
-          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 'var(--vetc-space-8)', paddingBottom: 'var(--vetc-space-4)' }}>
-            <div style={{
-              width:        'var(--vetc-sheet-handle-width)',
-              height:       'var(--vetc-sheet-handle-height)',
-              borderRadius: 'var(--vetc-radius-pill)',
-              backgroundColor: 'var(--vetc-sheet-handle-color)',
-            }} />
-          </div>
-        )}
-
-        {/* Header */}
-        {title && (
-          <div style={{
-            padding:        `var(--vetc-space-12) var(--vetc-sheet-padding)`,
-            borderBottom:   `1px solid var(--vetc-sheet-border)`,
-            display:        'flex',
-            alignItems:     'center',
-            justifyContent: 'space-between',
-          }}>
-            <span style={{
-              fontSize:   'var(--vetc-sheet-title-size)',
-              fontWeight: 'var(--vetc-sheet-title-weight)' as any,
-              color:      'var(--vetc-sheet-title-color)',
-              lineHeight: 'var(--vetc-line-height-relaxed)',
-            }}>
-              {title}
-            </span>
-            {onClose && (
-              <button
-                onClick={onClose}
-                aria-label="Đóng"
-                style={{
-                  background:  'none',
-                  border:      'none',
-                  cursor:      'pointer',
-                  padding:     'var(--vetc-space-4)',
-                  display:     'flex',
-                  color:       'var(--vetc-color-icon-muted)',
-                  borderRadius:'var(--vetc-radius-pill)',
-                  transition:  'background-color var(--vetc-transition-fast)',
-                }}
-              >
-                <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>
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* Body */}
-        <div style={{ padding: 'var(--vetc-sheet-padding)' }}>
-          {children}
-        </div>
-      </div>
-
-      <style>{`
-        @keyframes vetc-fade-in {
-          from { opacity: 0 }
-          to   { opacity: 1 }
-        }
-        @keyframes vetc-slide-up {
-          from { transform: translateY(100%) }
-          to   { transform: translateY(0) }
-        }
-      `}</style>
-    </>
-  );
-}
-
-export default BottomSheet;

package/src/ui-react/components/button/Button.tsx

@@ -1,246 +0,0 @@
-/**
- * VETC Button Component
- * Figma: filled/outlined/elevated/ghost styles
- * Large: h=48px, radius=12px, font=16px/600
- * Small: h=32px, radius=8px,  font=14px/600
- * style:   filled | outlined | elevated | ghost | danger | danger-outlined
- * variant: brand (green) | neutral (gray-90)
- */
-import React, { useState } from 'react';
-
-export type ButtonStyle   = 'filled' | 'outlined' | 'elevated' | 'ghost' | 'danger' | 'danger-outlined';
-export type ButtonVariant = 'brand' | 'neutral';
-export type ButtonSize    = 'lg' | 'sm';
-export type ButtonShape   = 'rounded' | 'pill';
-
-export interface ButtonProps {
-  style?:     ButtonStyle;
-  variant?:   ButtonVariant;
-  size?:      ButtonSize;
-  shape?:     ButtonShape;
-  block?:     boolean;
-  disabled?:  boolean;
-  loading?:   boolean;
-  icon?:      React.ReactNode;
-  iconRight?: React.ReactNode;
-  onClick?:   React.MouseEventHandler<HTMLButtonElement>;
-  children?:  React.ReactNode;
-  htmlType?:  'button' | 'submit' | 'reset';
-  className?: string;
-  css?:       React.CSSProperties;
-  id?:        string;
-}
-
-type Tokens = {
-  bg: string; bgHover: string; bgActive: string;
-  text: string; border: string; shadow: string;
-};
-
-const BRAND: Record<ButtonStyle, Tokens> = {
-  filled: {
-    bg:       'var(--vetc-color-brand)',
-    bgHover:  'var(--vetc-color-brand-hover)',
-    bgActive: 'var(--vetc-color-brand-active)',
-    text:     'var(--vetc-white)',
-    border:   'transparent',
-    shadow:   'none',
-  },
-  outlined: {
-    bg:       'transparent',
-    bgHover:  'var(--vetc-green-02)',
-    bgActive: 'var(--vetc-green-05)',
-    text:     'var(--vetc-color-brand)',
-    border:   'var(--vetc-color-brand)',
-    shadow:   'none',
-  },
-  elevated: {
-    bg:       'var(--vetc-color-bg)',
-    bgHover:  'var(--vetc-color-bg-hover)',
-    bgActive: 'var(--vetc-color-bg-pressed)',
-    text:     'var(--vetc-color-brand)',
-    border:   'transparent',
-    shadow:   'var(--vetc-shadow-md)',
-  },
-  ghost: {
-    bg:       'transparent',
-    bgHover:  'var(--vetc-color-bg-hover)',
-    bgActive: 'var(--vetc-color-bg-pressed)',
-    text:     'var(--vetc-color-brand)',
-    border:   'transparent',
-    shadow:   'none',
-  },
-  danger: {
-    bg:       'var(--vetc-color-negative)',
-    bgHover:  'var(--vetc-red-60)',
-    bgActive: 'var(--vetc-red-60)',
-    text:     'var(--vetc-white)',
-    border:   'transparent',
-    shadow:   'none',
-  },
-  'danger-outlined': {
-    bg:       'transparent',
-    bgHover:  'var(--vetc-red-02)',
-    bgActive: 'var(--vetc-red-05)',
-    text:     'var(--vetc-color-negative)',
-    border:   'var(--vetc-color-negative)',
-    shadow:   'none',
-  },
-};
-
-const NEUTRAL: Record<ButtonStyle, Tokens> = {
-  filled: {
-    bg:       'var(--vetc-gray-90)',
-    bgHover:  'var(--vetc-gray-80)',
-    bgActive: 'var(--vetc-gray-70)',
-    text:     'var(--vetc-white)',
-    border:   'transparent',
-    shadow:   'none',
-  },
-  outlined: {
-    bg:       'transparent',
-    bgHover:  'var(--vetc-gray-05)',
-    bgActive: 'var(--vetc-gray-10)',
-    text:     'var(--vetc-gray-90)',
-    border:   'var(--vetc-gray-90)',
-    shadow:   'none',
-  },
-  elevated: {
-    bg:       'var(--vetc-color-bg)',
-    bgHover:  'var(--vetc-color-bg-hover)',
-    bgActive: 'var(--vetc-color-bg-pressed)',
-    text:     'var(--vetc-color-text-primary)',
-    border:   'transparent',
-    shadow:   'var(--vetc-shadow-md)',
-  },
-  ghost: {
-    bg:       'transparent',
-    bgHover:  'var(--vetc-color-bg-hover)',
-    bgActive: 'var(--vetc-color-bg-pressed)',
-    text:     'var(--vetc-color-text-primary)',
-    border:   'transparent',
-    shadow:   'none',
-  },
-  // danger variants are semantic — variant (brand/neutral) has no effect
-  danger: {
-    bg:       'var(--vetc-color-negative)',
-    bgHover:  'var(--vetc-red-60)',
-    bgActive: 'var(--vetc-red-60)',
-    text:     'var(--vetc-white)',
-    border:   'transparent',
-    shadow:   'none',
-  },
-  'danger-outlined': {
-    bg:       'transparent',
-    bgHover:  'var(--vetc-red-02)',
-    bgActive: 'var(--vetc-red-05)',
-    text:     'var(--vetc-color-negative)',
-    border:   'var(--vetc-color-negative)',
-    shadow:   'none',
-  },
-};
-
-const LoadingSpinner = ({ color }: { color: string }) => (
-  <svg
-    width="16" height="16" viewBox="0 0 16 16" fill="none"
-    style={{ animation: 'vetc-btn-spin 0.6s linear infinite', flexShrink: 0 }}
-    aria-hidden="true"
-  >
-    <circle cx="8" cy="8" r="6" stroke={color} strokeOpacity="0.25" strokeWidth="2" />
-    <path d="M8 2a6 6 0 016 6" stroke={color} strokeWidth="2" strokeLinecap="round" />
-  </svg>
-);
-
-export function Button({
-  style    = 'filled',
-  variant  = 'brand',
-  size     = 'lg',
-  shape    = 'rounded',
-  block    = false,
-  disabled = false,
-  loading  = false,
-  icon,
-  iconRight,
-  onClick,
-  children,
-  htmlType = 'button',
-  className = '',
-  css,
-  id,
-}: ButtonProps) {
-  const [pressed, setPressed] = useState(false);
-  const [hovered, setHovered] = useState(false);
-
-  const tokens    = (variant === 'neutral' ? NEUTRAL : BRAND)[style];
-  const isDisabled = disabled || loading;
-
-  const height   = size === 'lg' ? 'var(--vetc-btn-height-lg)'    : 'var(--vetc-btn-height-sm)';
-  const fontSize = size === 'lg' ? 'var(--vetc-btn-font-size-lg)' : 'var(--vetc-btn-font-size-sm)';
-  const paddingX = size === 'lg' ? 'var(--vetc-btn-padding-x-lg)' : 'var(--vetc-btn-padding-x-sm)';
-  const radius   = shape === 'pill'   ? 'var(--vetc-btn-radius-pill)'
-    : size  === 'lg' ? 'var(--vetc-btn-radius-lg)'
-    : 'var(--vetc-btn-radius-sm)';
-
-  let bg     = tokens.bg;
-  let border = tokens.border;
-  let shadow = tokens.shadow;
-
-  if (isDisabled) {
-    bg     = 'var(--vetc-btn-disabled-bg)';
-    border = 'var(--vetc-btn-disabled-border)';
-    shadow = 'none';
-  } else if (pressed) {
-    bg = tokens.bgActive;
-  } else if (hovered) {
-    bg = tokens.bgHover;
-  }
-
-  const textColor    = isDisabled ? 'var(--vetc-btn-disabled-text)' : tokens.text;
-  const spinnerColor = isDisabled ? 'var(--vetc-gray-30)' : tokens.text;
-
-  return (
-    <>
-      <button
-        id={id}
-        type={htmlType}
-        disabled={isDisabled}
-        onClick={onClick}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => { setHovered(false); setPressed(false); }}
-        onMouseDown={() => setPressed(true)}
-        onMouseUp={() => setPressed(false)}
-        className={`vetc-btn vetc-btn--${style} vetc-btn--${variant} vetc-btn--${size} ${className}`}
-        style={{
-          display:         'inline-flex',
-          alignItems:      'center',
-          justifyContent:  'center',
-          gap:             'var(--vetc-space-8)',
-          height,
-          width:           block ? '100%' : undefined,
-          paddingInline:   paddingX,
-          borderRadius:    radius,
-          border:          `1px solid ${border}`,
-          backgroundColor: bg,
-          boxShadow:       shadow,
-          color:           textColor,
-          fontSize,
-          fontWeight:      'var(--vetc-btn-font-weight)' as any,
-          fontFamily:      'var(--vetc-font-family)',
-          lineHeight:      'var(--vetc-line-height-relaxed)',
-          cursor:          isDisabled ? 'not-allowed' : 'pointer',
-          transition:      'background-color var(--vetc-transition-fast), box-shadow var(--vetc-transition-fast)',
-          userSelect:      'none',
-          outline:         'none',
-          whiteSpace:      'nowrap',
-          ...css,
-        }}
-      >
-        {loading ? <LoadingSpinner color={spinnerColor} /> : icon && <span style={{ display: 'inline-flex', flexShrink: 0 }}>{icon}</span>}
-        {children && <span>{children}</span>}
-        {iconRight && !loading && <span style={{ display: 'inline-flex', flexShrink: 0 }}>{iconRight}</span>}
-      </button>
-      <style>{`@keyframes vetc-btn-spin { to { transform: rotate(360deg); } }`}</style>
-    </>
-  );
-}
-
-export default Button;

package/src/ui-react/components/button-group/ButtonGroup.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { Button } from '../button';
-
-export type ButtonGroupLayout  = 'inline' | 'stacked';
-export type ButtonGroupVariant = 'bounding' | 'none';
-
-export interface ButtonGroupAction {
-  label: React.ReactNode;
-  onClick?: () => void;
-  loading?: boolean;
-  disabled?: boolean;
-}
-
-export interface ButtonGroupProps {
-  /** Primary action — brand filled, rightmost (inline) or bottom (stacked). Required. */
-  primary: ButtonGroupAction & {
-    /** danger = red filled style */
-    danger?: boolean;
-    /** Override primary button color. Default: brand */
-    variant?: 'brand' | 'neutral';
-  };
-  /** Secondary actions — neutral outlined. Max 2. */
-  secondary?: ButtonGroupAction[];
-  /** Optional content rendered above the button row */
-  content?: React.ReactNode;
-  /** inline: buttons side by side | stacked: buttons stacked vertically */
-  layout?: ButtonGroupLayout;
-  /** bounding: top border + background | none: no container styling */
-  variant?: ButtonGroupVariant;
-}
-
-export function ButtonGroup({
-  primary,
-  secondary = [],
-  content,
-  layout = 'inline',
-  variant = 'none',
-}: ButtonGroupProps) {
-  const isInline   = layout === 'inline';
-  const isBounding = variant === 'bounding';
-
-  const containerStyle: React.CSSProperties = isBounding
-    ? {
-        backgroundColor: 'var(--vetc-btn-group-bg)',
-        borderTop: `1px solid var(--vetc-btn-group-border-color)`,
-        padding: 'var(--vetc-btn-group-padding)',
-        fontFamily: 'var(--vetc-font-family)',
-      }
-    : { fontFamily: 'var(--vetc-font-family)' };
-
-  const rowStyle: React.CSSProperties = isInline
-    ? { display: 'flex', gap: 'var(--vetc-btn-group-gap)', alignItems: 'stretch' }
-    : { display: 'flex', flexDirection: 'column', gap: 'var(--vetc-btn-group-gap)' };
-
-  const secondaryBtns = secondary.map((action, i) => (
-    <Button
-      key={i}
-      style="outlined"
-      variant="neutral"
-      block={!isInline}
-      loading={action.loading}
-      disabled={action.disabled}
-      onClick={action.onClick}
-      css={isInline ? { flex: 1 } : undefined}
-    >
-      {action.label}
-    </Button>
-  ));
-
-  const primaryBtn = (
-    <Button
-      style={primary.danger ? 'danger' : 'filled'}
-      variant={primary.variant ?? 'brand'}
-      block={!isInline}
-      loading={primary.loading}
-      disabled={primary.disabled}
-      onClick={primary.onClick}
-      css={isInline ? { flex: 1 } : undefined}
-    >
-      {primary.label}
-    </Button>
-  );
-
-  return (
-    <div style={containerStyle}>
-      {content && (
-        <div style={{ marginBottom: 'var(--vetc-btn-group-padding)' }}>
-          {content}
-        </div>
-      )}
-      <div style={rowStyle}>
-        {isInline ? (
-          <>
-            {secondaryBtns}
-            {primaryBtn}
-          </>
-        ) : (
-          <>
-            {primaryBtn}
-            {secondaryBtns}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default ButtonGroup;

package/src/ui-react/components/card/Card.tsx

@@ -1,77 +0,0 @@
-/**
- * VETC Card — tokenized
- */
-import React from 'react';
-import { Card as AntCard } from 'antd';
-
-export type CardElevation = 'flat' | 'raised' | 'outlined';
-
-export interface CardProps {
-  elevation?: CardElevation;
-  title?: React.ReactNode;
-  extra?: React.ReactNode;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-  bodyStyle?: React.CSSProperties;
-  id?: string;
-}
-
-export function Card({
-  elevation = 'outlined',
-  title,
-  extra,
-  children,
-  onClick,
-  className = '',
-  style,
-  bodyStyle,
-  id,
-}: CardProps) {
-  const shadowMap: Record<CardElevation, string> = {
-    flat:     'var(--vetc-shadow-none)',
-    raised:   'var(--vetc-card-shadow-raised)',
-    outlined: 'var(--vetc-shadow-none)',
-  };
-  const borderMap: Record<CardElevation, string> = {
-    flat:     'none',
-    raised:   'none',
-    outlined: `1px solid var(--vetc-card-border)`,
-  };
-
-  return (
-    <AntCard
-      id={id}
-      title={title}
-      extra={extra}
-      onClick={onClick}
-      className={`vetc-card vetc-card--${elevation} ${className}`}
-      styles={{
-        body: {
-          padding:    'var(--vetc-card-padding)',
-          fontFamily: 'var(--vetc-font-family)',
-          ...bodyStyle,
-        },
-        header: title
-          ? { borderBottom: `1px solid var(--vetc-card-border)`, padding: `var(--vetc-space-12) var(--vetc-card-padding)` }
-          : undefined,
-      }}
-      style={{
-        borderRadius:    'var(--vetc-card-radius)',
-        border:          borderMap[elevation],
-        boxShadow:       shadowMap[elevation],
-        cursor:          onClick ? 'pointer' : 'default',
-        overflow:        'hidden',
-        backgroundColor: 'var(--vetc-card-bg)',
-        fontFamily:      'var(--vetc-font-family)',
-        transition:      `box-shadow var(--vetc-transition-fast)`,
-        ...style,
-      }}
-    >
-      {children}
-    </AntCard>
-  );
-}
-
-export default Card;