@vetc-miniapp/ui-react 0.0.22 → 0.0.24

package/src/ui-react/index.ts

@@ -1,9 +1,85 @@
+// ─── Styles (import once at app root) ────────────────────────────────────────
+// import '@vetc-miniapp/ui-react/src/ui-react/styles/tokens.css';
+
+// ─── Theme Provider ───────────────────────────────────────────────────────────
+export { VETCProvider, vetcAntdTheme } from './styles/VETCProvider';
+export type { VETCProviderProps } from './styles/VETCProvider';
+
+// ─── Tokens ───────────────────────────────────────────────────────────────────
+export { colorGlobal, colorAlias } from './tokens/colors';
+export { fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textStyle } from './tokens/typography';
+export { spacing, borderRadius, componentHeight, shadow } from './tokens/spacing';
+
+// ─── Components ───────────────────────────────────────────────────────────────
+export { Button } from './components/button';
+export type { ButtonProps, ButtonStyle, ButtonVariant, ButtonSize, ButtonShape } from './components/button';
+
+export { ButtonGroup } from './components/button-group';
+export type { ButtonGroupProps, ButtonGroupAction, ButtonGroupLayout, ButtonGroupVariant } from './components/button-group';
+
+export { Typography, Display, Headline, Title, Label, Body } from './components/typography';
+export type { TypographyProps, TypographyVariant, TextColor } from './components/typography';
+
+export { Input, PasswordInput } from './components/input';
+export type { InputProps, PasswordInputProps, InputStatus } from './components/input';
+
+export { Textarea } from './components/textarea';
+export type { TextareaProps } from './components/textarea';
+
+export { Select } from './components/select';
+export type { SelectProps, SelectOption } from './components/select';
+
+export { Checkbox, CheckboxGroup } from './components/checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxOption, CheckboxVariant } from './components/checkbox';
+
+export { Radio, RadioGroup } from './components/radio';
+export type { RadioProps, RadioGroupProps, RadioOption, RadioVariant } from './components/radio';
+
+export { Switch } from './components/switch';
+export type { SwitchProps, SwitchVariant } from './components/switch';
+
+export { Chip } from './components/chip';
+export type { ChipProps, ChipStyle, ChipType, ChipShape } from './components/chip';
+
+export { Avatar } from './components/avatar';
+export type { AvatarProps, AvatarSize, AvatarShape } from './components/avatar';
+
+export { Card } from './components/card';
+export type { CardProps, CardElevation } from './components/card';
+
+export { List, ListItem } from './components/list';
+export type { ListProps, ListItemProps } from './components/list';
+
+export { Divider } from './components/divider';
+export type { DividerProps } from './components/divider';
+
+export { Spinner, SkeletonLoader } from './components/loading';
+export type { SpinnerProps, SkeletonProps, SpinnerSize } from './components/loading';
+
+export { toast, useToast } from './components/toast';
+export type { ToastOptions, ToastType } from './components/toast';
+
+export { Modal, useConfirm } from './components/modal';
+export type { ModalProps } from './components/modal';
+
+export { Dialog } from './components/dialog';
+export type { DialogProps } from './components/dialog';
+
+export { BottomSheet } from './components/bottom-sheet';
+export type { BottomSheetProps } from './components/bottom-sheet';
+
+export { NavigationBar } from './components/navigation-bar';
+export type { NavigationBarProps, NavigationBarAction } from './components/navigation-bar';
+
+export { TabBar } from './components/tab-bar';
+export type { TabBarProps, TabBarItem, TabBarVariant } from './components/tab-bar';
+
+// ─── Hooks (existing) ─────────────────────────────────────────────────────────
 export * from './hooks/use-app-resume';
 export * from './hooks/use-app-pause';
 export * from './hooks/use-did-show';
 export * from './hooks/use-did-hide';
+export * from './hooks/use-tap-app-bar';
 export * from './hooks/use-navigate';
 export * from './hooks/use-app-state';
-export * from './hooks/use-listener-scan-qr.ts';
-// export * from './components/app';
-
+export * from './hooks/use-listener-scan-qr';

package/src/ui-react/styles/VETCProvider.tsx

@@ -0,0 +1,152 @@
+/**
+ * VETC Design System — Ant Design Theme Provider
+ * Wraps children with ConfigProvider using VETC token overrides.
+ */
+import React from 'react';
+import { ConfigProvider, App as AntApp, theme } from 'antd';
+import { colorAlias, colorGlobal } from '../tokens/colors';
+
+export const vetcAntdTheme = {
+  token: {
+    // Brand / Primary
+    colorPrimary:           colorAlias.brand,          // #25a45e
+    colorPrimaryHover:      colorGlobal.green35,
+    colorPrimaryActive:     colorAlias.brandDark,
+    colorPrimaryBg:         colorGlobal.green02,
+    colorPrimaryBgHover:    colorGlobal.green05,
+
+    // Error / Danger
+    colorError:             colorAlias.negative,       // #da2c39
+    colorErrorHover:        colorGlobal.red60,
+    colorErrorBg:           colorGlobal.red02,
+
+    // Warning
+    colorWarning:           colorAlias.warning,        // #ff8c2f
+    colorWarningBg:         colorGlobal.orange02,
+
+    // Success
+    colorSuccess:           colorAlias.positive,       // #208758
+    colorSuccessBg:         colorGlobal.green02,
+
+    // Text
+    colorText:              colorAlias.primaryOnTheme,    // #181719
+    colorTextSecondary:     colorAlias.secondaryOnTheme,  // #5e5d64
+    colorTextDisabled:      colorAlias.disabledContent,   // #abacb2
+    colorTextPlaceholder:   colorGlobal.gray50,
+
+    // Background
+    colorBgContainer:       colorAlias.theme,           // #ffffff
+    colorBgLayout:          colorAlias.themeVariant,    // #f1f1f2
+    colorBgSpotlight:       colorAlias.inverseTheme,
+
+    // Border
+    colorBorder:            colorGlobal.gray20,         // #c6c8cc
+    colorBorderSecondary:   colorGlobal.gray10,         // #e3e4e6
+    colorSplit:             colorGlobal.gray10,
+
+    // Fill states
+    colorFill:              colorGlobal.gray05,
+    colorFillSecondary:     colorGlobal.gray10,
+    colorFillTertiary:      colorGlobal.gray15,
+
+    // Typography
+    fontFamily:             '"Roboto", system-ui, -apple-system, sans-serif',
+    fontSize:               16,
+    fontSizeSM:             13,
+    fontSizeLG:             18,
+    fontSizeXL:             19,
+    fontSizeHeading1:       32,
+    fontSizeHeading2:       28,
+    fontSizeHeading3:       24,
+    fontSizeHeading4:       19,
+    fontSizeHeading5:       16,
+    fontWeightStrong:       600,
+    lineHeight:             1.5,
+
+    // Shape
+    borderRadius:           8,
+    borderRadiusSM:         6,
+    borderRadiusLG:         12,
+    borderRadiusXS:         4,
+
+    // Size
+    controlHeight:          48,
+    controlHeightSM:        32,
+    controlHeightLG:        56,
+
+    // Padding
+    paddingXS:              8,
+    paddingSM:              12,
+    padding:                16,
+    paddingMD:              16,
+    paddingLG:              24,
+
+    // Motion
+    motionDurationFast:     '150ms',
+    motionDurationMid:      '250ms',
+  },
+  components: {
+    Button: {
+      primaryColor:           '#ffffff',
+      defaultBorderColor:     colorGlobal.gray20,
+      defaultColor:           colorAlias.primaryOnTheme,
+      borderRadius:           12,
+      borderRadiusSM:         8,
+      borderRadiusLG:         12,
+      controlHeight:          48,
+      controlHeightSM:        32,
+      paddingInline:          16,
+      paddingInlineSM:        12,
+      fontWeight:             600,
+    },
+    Input: {
+      borderRadius:           8,
+      controlHeight:          48,
+      paddingInline:          12,
+      colorBorder:            colorGlobal.gray20,
+      hoverBorderColor:       colorAlias.outline,
+      activeBorderColor:      colorAlias.brand,
+    },
+    Select: {
+      borderRadius:           8,
+      controlHeight:          48,
+    },
+    Checkbox: {
+      borderRadius:           4,
+      controlInteractiveSize: 20,
+    },
+    Radio: {
+      radioSize:              20,
+      dotSize:                8,
+    },
+    Switch: {
+      trackHeight:            32,
+      trackMinWidth:          52,
+      handleSize:             28,
+      colorPrimary:           colorAlias.brand,
+    },
+    Modal: {
+      borderRadiusLG:         16,
+      paddingContentHorizontalLG: 16,
+      paddingMD:              16,
+    },
+    Card: {
+      borderRadius:           16,
+      paddingLG:              16,
+    },
+  },
+};
+
+export interface VETCProviderProps {
+  children: React.ReactNode;
+}
+
+export function VETCProvider({ children }: VETCProviderProps) {
+  return (
+    <ConfigProvider theme={{ ...vetcAntdTheme, algorithm: theme.defaultAlgorithm }}>
+      <AntApp>
+        {children}
+      </AntApp>
+    </ConfigProvider>
+  );
+}

package/src/ui-react/styles/tokens.css

@@ -0,0 +1,427 @@
+/**
+ * VETC Design System — CSS Custom Properties
+ * Single source of truth. Import once at app root.
+ * All components reference these vars — change token here, all components update.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700;800;900&display=swap');
+
+/* ════════════════════════════════════════════════════════════
+   1. GLOBAL COLOR PALETTE (raw values from tokens_vetc.json)
+   ════════════════════════════════════════════════════════════ */
+:root {
+  /* Green */
+  --vetc-green-02: #f2fef2;
+  --vetc-green-05: #dffbdf;
+  --vetc-green-10: #bff4bf;
+  --vetc-green-35: #39b669;
+  --vetc-green-40: #25a45e;
+  --vetc-green-45: #23965b;
+  --vetc-green-50: #208758;
+  --vetc-green-60: #1b6b4d;
+
+  /* Gray */
+  --vetc-gray-02: #f9fafa;
+  --vetc-gray-05: #f1f1f2;
+  --vetc-gray-10: #e3e4e6;
+  --vetc-gray-15: #d4d6d9;
+  --vetc-gray-20: #c6c8cc;
+  --vetc-gray-25: #b8babf;
+  --vetc-gray-30: #abacb2;
+  --vetc-gray-35: #9d9ea5;
+  --vetc-gray-40: #8f9098;
+  --vetc-gray-45: #82828a;
+  --vetc-gray-50: #74747d;
+  --vetc-gray-60: #5e5d64;
+  --vetc-gray-70: #47464b;
+  --vetc-gray-80: #2f2f32;
+  --vetc-gray-90: #181719;
+
+  /* Red */
+  --vetc-red-02: #fff6f9;
+  --vetc-red-05: #ffe7f0;
+  --vetc-red-50: #da2c39;
+  --vetc-red-60: #b4211f;
+
+  /* Orange */
+  --vetc-orange-02: #fffbf0;
+  --vetc-orange-30: #ff8c2f;
+
+  /* Yellow */
+  --vetc-yellow-02: #fff8e7;
+  --vetc-yellow-20: #f9c600;
+
+  /* Blue */
+  --vetc-blue-02: #f4fbff;
+  --vetc-blue-50: #007ac1;
+  --vetc-blue-70: #004179;
+
+  /* Base */
+  --vetc-white: #ffffff;
+  --vetc-black: #000000;
+
+/* ════════════════════════════════════════════════════════════
+   2. SEMANTIC / ALIAS TOKENS
+   ════════════════════════════════════════════════════════════ */
+
+  /* Brand */
+  --vetc-color-brand:              var(--vetc-green-40);
+  --vetc-color-brand-hover:        var(--vetc-green-35);
+  --vetc-color-brand-active:       var(--vetc-green-50);
+  --vetc-color-brand-light:        var(--vetc-green-05);
+  --vetc-color-on-brand:           var(--vetc-white);
+
+  /* Semantic states */
+  --vetc-color-positive:           var(--vetc-green-50);
+  --vetc-color-positive-light:     var(--vetc-green-05);
+  --vetc-color-on-positive:        var(--vetc-white);
+  --vetc-color-negative:           var(--vetc-red-50);
+  --vetc-color-negative-light:     var(--vetc-red-02);
+  --vetc-color-on-negative:        var(--vetc-white);
+  --vetc-color-warning:            var(--vetc-orange-30);
+  --vetc-color-warning-light:      var(--vetc-orange-02);
+  --vetc-color-on-warning:         var(--vetc-white);
+  --vetc-color-info:               var(--vetc-blue-50);
+  --vetc-color-info-light:         var(--vetc-blue-02);
+  --vetc-color-on-info:            var(--vetc-white);
+
+  /* Text */
+  --vetc-color-text-primary:       var(--vetc-gray-90);
+  --vetc-color-text-secondary:     var(--vetc-gray-60);
+  --vetc-color-text-tertiary:      var(--vetc-gray-50);
+  --vetc-color-text-disabled:      var(--vetc-gray-30);
+  --vetc-color-text-on-brand:      var(--vetc-white);
+  --vetc-color-text-on-inverse:    var(--vetc-white);
+  --vetc-color-text-placeholder:   var(--vetc-gray-50);
+  --vetc-color-text-error:         var(--vetc-red-50);
+
+  /* Background */
+  --vetc-color-bg:                 var(--vetc-white);
+  --vetc-color-bg-variant:         var(--vetc-gray-05);
+  --vetc-color-bg-elevated:        var(--vetc-white);
+  --vetc-color-bg-inverse:         var(--vetc-gray-90);
+  --vetc-color-bg-disabled:        var(--vetc-gray-10);
+  --vetc-color-bg-hover:           var(--vetc-gray-05);
+  --vetc-color-bg-pressed:         var(--vetc-gray-10);
+
+  /* Border / Outline */
+  --vetc-color-border:             var(--vetc-gray-20);
+  --vetc-color-border-variant:     var(--vetc-gray-10);
+  --vetc-color-border-focus:       var(--vetc-green-40);
+  --vetc-color-border-error:       var(--vetc-red-50);
+  --vetc-color-border-disabled:    var(--vetc-gray-20);
+
+  /* Overlay */
+  --vetc-color-overlay:            rgba(0, 0, 0, 0.4);
+  --vetc-color-overlay-light:      rgba(0, 0, 0, 0.16);
+  --vetc-color-skeleton:           rgba(0, 0, 0, 0.08);
+
+  /* Icon */
+  --vetc-color-icon-default:       var(--vetc-gray-60);
+  --vetc-color-icon-muted:         var(--vetc-gray-50);
+  --vetc-color-icon-disabled:      var(--vetc-gray-30);
+
+/* ════════════════════════════════════════════════════════════
+   3. TYPOGRAPHY
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-font-family:              'Roboto', system-ui, -apple-system, sans-serif;
+
+  /* Font weights — Figma: Regular=400, Medium=500, SemiBold=600, Bold=700 */
+  --vetc-font-weight-regular:      400;
+  --vetc-font-weight-medium:       500;
+  --vetc-font-weight-semibold:     600;
+  --vetc-font-weight-bold:         700;
+  --vetc-font-weight-black:        900;
+
+  /* Font sizes — Figma Typography scale */
+  --vetc-font-size-2xs:            10px;
+  --vetc-font-size-xs:             12px;
+  --vetc-font-size-sm:             14px;
+  --vetc-font-size-base:           16px;
+  --vetc-font-size-lg:             20px;
+  --vetc-font-size-xl:             24px;
+  --vetc-font-size-2xl:            28px;
+  --vetc-font-size-3xl:            32px;
+  --vetc-font-size-4xl:            36px;
+
+  /* Line heights — Figma: Display≈120%, Heading=140%, Body=150% */
+  --vetc-line-height-tight:        1.2;
+  --vetc-line-height-normal:       1.4;
+  --vetc-line-height-relaxed:      1.5;
+
+  /* Letter spacing */
+  --vetc-letter-spacing-none:      0;
+  --vetc-letter-spacing-sm:        0.1px;
+  --vetc-letter-spacing-md:        0.25px;
+  --vetc-letter-spacing-lg:        0.5px;
+
+/* ════════════════════════════════════════════════════════════
+   4. SPACING
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-space-0:   0px;
+  --vetc-space-2:   2px;
+  --vetc-space-4:   4px;
+  --vetc-space-6:   6px;
+  --vetc-space-8:   8px;
+  --vetc-space-10:  10px;
+  --vetc-space-12:  12px;
+  --vetc-space-14:  14px;
+  --vetc-space-16:  16px;
+  --vetc-space-20:  20px;
+  --vetc-space-24:  24px;
+  --vetc-space-32:  32px;
+  --vetc-space-40:  40px;
+  --vetc-space-48:  48px;
+  --vetc-space-56:  56px;
+  --vetc-space-64:  64px;
+
+/* ════════════════════════════════════════════════════════════
+   5. BORDER RADIUS
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-radius-xs:    4px;
+  --vetc-radius-sm:    6px;
+  --vetc-radius-md:    8px;
+  --vetc-radius-lg:    12px;
+  --vetc-radius-xl:    16px;
+  --vetc-radius-2xl:   24px;
+  --vetc-radius-pill:  1000px;
+
+/* ════════════════════════════════════════════════════════════
+   6. SHADOWS
+   ════════════════════════════════════════════════════════════ */
+
+  --vetc-shadow-none:  none;
+  --vetc-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.08);
+  --vetc-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.12);
+  --vetc-shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.16);
+
+/* ════════════════════════════════════════════════════════════
+   7. COMPONENT-SPECIFIC TOKENS
+   Thay đổi component token ở đây — không cần sửa component code
+   ════════════════════════════════════════════════════════════ */
+
+  /* ── Button ─────────────────────────────── */
+  --vetc-btn-height-lg:            48px;
+  --vetc-btn-height-sm:            32px;
+  --vetc-btn-padding-x-lg:         var(--vetc-space-16);
+  --vetc-btn-padding-x-sm:         var(--vetc-space-12);
+  --vetc-btn-font-size-lg:         var(--vetc-font-size-base);
+  --vetc-btn-font-size-sm:         var(--vetc-font-size-sm);
+  --vetc-btn-font-weight:          var(--vetc-font-weight-semibold);
+  --vetc-btn-radius-lg:            var(--vetc-radius-lg);
+  --vetc-btn-radius-sm:            var(--vetc-radius-md);
+  --vetc-btn-radius-pill:          var(--vetc-radius-pill);
+  /* Primary */
+  --vetc-btn-primary-bg:           var(--vetc-color-brand);
+  --vetc-btn-primary-bg-hover:     var(--vetc-color-brand-hover);
+  --vetc-btn-primary-bg-active:    var(--vetc-color-brand-active);
+  --vetc-btn-primary-text:         var(--vetc-color-on-brand);
+  /* Secondary */
+  --vetc-btn-secondary-border:     var(--vetc-color-border);
+  --vetc-btn-secondary-text:       var(--vetc-color-text-primary);
+  /* Tertiary */
+  --vetc-btn-tertiary-text:        var(--vetc-color-text-primary);
+  /* Danger */
+  --vetc-btn-danger-bg:            var(--vetc-color-negative);
+  --vetc-btn-danger-text:          var(--vetc-color-on-negative);
+  /* Disabled */
+  --vetc-btn-disabled-bg:          var(--vetc-color-bg-disabled);
+  --vetc-btn-disabled-text:        var(--vetc-color-text-disabled);
+  --vetc-btn-disabled-border:      var(--vetc-color-border-disabled);
+
+  /* ── Input / TextField ──────────────────── */
+  --vetc-input-height:             48px;
+  --vetc-input-padding-x:          var(--vetc-space-12);
+  --vetc-input-radius:             var(--vetc-radius-md);
+  --vetc-input-font-size:          var(--vetc-font-size-base);
+  --vetc-input-border:             var(--vetc-color-border);
+  --vetc-input-border-focus:       var(--vetc-color-border-focus);
+  --vetc-input-border-error:       var(--vetc-color-border-error);
+  --vetc-input-border-disabled:    var(--vetc-color-border-disabled);
+  --vetc-input-bg:                 var(--vetc-color-bg);
+  --vetc-input-bg-disabled:        var(--vetc-color-bg-disabled);
+  --vetc-input-text:               var(--vetc-color-text-primary);
+  --vetc-input-text-placeholder:   var(--vetc-color-text-placeholder);
+  --vetc-input-text-disabled:      var(--vetc-color-text-disabled);
+  /* Label above input */
+  --vetc-input-label-font-size:    var(--vetc-font-size-sm);
+  --vetc-input-label-font-weight:  var(--vetc-font-weight-semibold);
+  --vetc-input-label-color:        var(--vetc-color-text-primary);
+  /* Helper text below input */
+  --vetc-input-helper-font-size:   var(--vetc-font-size-xs);
+  --vetc-input-helper-color:       var(--vetc-color-text-secondary);
+  --vetc-input-helper-color-error: var(--vetc-color-text-error);
+  --vetc-input-gap:                var(--vetc-space-4);
+
+  /* ── Chip / Tag ─────────────────────────── */
+  --vetc-chip-height-md:           32px;
+  --vetc-chip-height-sm:           24px;
+  --vetc-chip-padding-x-md:        var(--vetc-space-12);
+  --vetc-chip-padding-x-sm:        var(--vetc-space-8);
+  --vetc-chip-font-size-md:        var(--vetc-font-size-sm);
+  --vetc-chip-font-size-sm:        var(--vetc-font-size-xs);
+  --vetc-chip-font-weight:         var(--vetc-font-weight-semibold);
+  --vetc-chip-radius-pill:         var(--vetc-radius-pill);
+  --vetc-chip-radius-rounded:      var(--vetc-radius-md);
+  /* Default */
+  --vetc-chip-default-bg:          var(--vetc-gray-05);
+  --vetc-chip-default-border:      var(--vetc-gray-20);
+  --vetc-chip-default-text:        var(--vetc-gray-90);
+  --vetc-chip-default-filled-bg:   var(--vetc-gray-50);
+  /* Brand */
+  --vetc-chip-brand-bg:            var(--vetc-green-05);
+  --vetc-chip-brand-border:        var(--vetc-green-40);
+  --vetc-chip-brand-text:          var(--vetc-green-60);
+  --vetc-chip-brand-filled-bg:     var(--vetc-green-40);
+  /* Positive */
+  --vetc-chip-positive-bg:         var(--vetc-green-05);
+  --vetc-chip-positive-border:     var(--vetc-green-50);
+  --vetc-chip-positive-text:       var(--vetc-green-60);
+  --vetc-chip-positive-filled-bg:  var(--vetc-green-50);
+  /* Negative */
+  --vetc-chip-negative-bg:         var(--vetc-red-02);
+  --vetc-chip-negative-border:     var(--vetc-red-50);
+  --vetc-chip-negative-text:       var(--vetc-red-60);
+  --vetc-chip-negative-filled-bg:  var(--vetc-red-50);
+  /* Warning */
+  --vetc-chip-warning-bg:          var(--vetc-orange-02);
+  --vetc-chip-warning-border:      var(--vetc-orange-30);
+  --vetc-chip-warning-text:        #934913;
+  --vetc-chip-warning-filled-bg:   var(--vetc-orange-30);
+  /* Info */
+  --vetc-chip-info-bg:             var(--vetc-blue-02);
+  --vetc-chip-info-border:         var(--vetc-blue-50);
+  --vetc-chip-info-text:           var(--vetc-blue-70);
+  --vetc-chip-info-filled-bg:      var(--vetc-blue-50);
+
+  /* ── Card ───────────────────────────────── */
+  --vetc-card-radius:              var(--vetc-radius-xl);
+  --vetc-card-padding:             var(--vetc-space-16);
+  --vetc-card-border:              var(--vetc-color-border-variant);
+  --vetc-card-bg:                  var(--vetc-color-bg);
+  --vetc-card-shadow-raised:       var(--vetc-shadow-md);
+
+  /* ── List Item ──────────────────────────── */
+  --vetc-list-item-height:         56px;
+  --vetc-list-item-padding-x:      var(--vetc-space-16);
+  --vetc-list-item-gap:            var(--vetc-space-12);
+  --vetc-list-item-bg:             var(--vetc-color-bg);
+  --vetc-list-item-bg-hover:       var(--vetc-color-bg-variant);
+  --vetc-list-item-border:         var(--vetc-color-border-variant);
+  --vetc-list-item-title-size:     var(--vetc-font-size-base);
+  --vetc-list-item-title-weight:   var(--vetc-font-weight-regular);
+  --vetc-list-item-title-color:    var(--vetc-color-text-primary);
+  --vetc-list-item-desc-size:      var(--vetc-font-size-sm);
+  --vetc-list-item-desc-color:     var(--vetc-color-text-secondary);
+  --vetc-list-item-icon-color:     var(--vetc-color-icon-default);
+
+  /* ── Navigation Bar (Top) ───────────────── */
+  --vetc-nav-height:               56px;
+  --vetc-nav-bg:                   var(--vetc-color-bg);
+  --vetc-nav-border:               var(--vetc-color-border-variant);
+  --vetc-nav-padding-x:            var(--vetc-space-8);
+  --vetc-nav-title-size:           var(--vetc-font-size-lg);
+  --vetc-nav-title-weight:         var(--vetc-font-weight-semibold);
+  --vetc-nav-title-color:          var(--vetc-color-text-primary);
+  --vetc-nav-icon-color:           var(--vetc-color-text-primary);
+  --vetc-nav-icon-btn-size:        32px;
+
+  /* ── Tab Bar (Bottom Nav) ───────────────── */
+  --vetc-tab-height:               56px;
+  --vetc-tab-bg:                   var(--vetc-color-bg);
+  --vetc-tab-border:               var(--vetc-color-border-variant);
+  --vetc-tab-label-size:           var(--vetc-font-size-xs);
+  --vetc-tab-label-weight:         var(--vetc-font-weight-semibold);
+  --vetc-tab-color-active:         var(--vetc-color-brand);
+  --vetc-tab-color-inactive:       var(--vetc-color-text-tertiary);
+  --vetc-tab-color-disabled:       var(--vetc-color-text-disabled);
+  --vetc-tab-badge-bg:             var(--vetc-color-negative);
+  --vetc-tab-badge-text:           var(--vetc-white);
+  --vetc-tab-badge-size:           16px;
+  --vetc-tab-badge-font-size:      var(--vetc-font-size-2xs);
+
+  /* ── Bottom Sheet ───────────────────────── */
+  --vetc-sheet-bg:                 var(--vetc-color-bg);
+  --vetc-sheet-radius:             var(--vetc-radius-xl);
+  --vetc-sheet-padding:            var(--vetc-space-16);
+  --vetc-sheet-handle-width:       32px;
+  --vetc-sheet-handle-height:      4px;
+  --vetc-sheet-handle-color:       var(--vetc-gray-20);
+  --vetc-sheet-overlay:            var(--vetc-color-overlay);
+  --vetc-sheet-title-size:         var(--vetc-font-size-base);
+  --vetc-sheet-title-weight:       var(--vetc-font-weight-semibold);
+  --vetc-sheet-title-color:        var(--vetc-color-text-primary);
+  --vetc-sheet-border:             var(--vetc-color-border-variant);
+
+  /* ── Modal / Dialog ─────────────────────── */
+  --vetc-modal-width:              344px;
+  --vetc-modal-radius:             var(--vetc-radius-xl);
+  --vetc-modal-padding:            var(--vetc-space-16);
+  --vetc-modal-overlay:            var(--vetc-color-overlay);
+  --vetc-modal-bg:                 var(--vetc-color-bg);
+
+  /* ── Button Group ───────────────────────── */
+  --vetc-btn-group-padding:        var(--vetc-space-16);
+  --vetc-btn-group-gap:            var(--vetc-space-8);
+  --vetc-btn-group-border-color:   var(--vetc-color-border-variant);
+  --vetc-btn-group-bg:             var(--vetc-color-bg);
+
+  --vetc-dialog-width:             344px;
+  --vetc-dialog-radius:            var(--vetc-radius-xl);
+  --vetc-dialog-padding:           var(--vetc-space-16);
+  --vetc-dialog-overlay:           var(--vetc-color-overlay);
+  --vetc-dialog-bg:                var(--vetc-color-bg);
+  --vetc-dialog-image-height:      160px;
+  --vetc-dialog-btn-gap:           var(--vetc-space-8);
+  --vetc-dialog-title-size:        var(--vetc-font-size-base);
+  --vetc-dialog-title-weight:      var(--vetc-font-weight-semibold);
+  --vetc-dialog-desc-size:         var(--vetc-font-size-sm);
+  --vetc-dialog-desc-color:        var(--vetc-color-text-secondary);
+
+  /* ── Divider ────────────────────────────── */
+  --vetc-divider-color:            var(--vetc-color-border-variant);
+  --vetc-divider-label-size:       var(--vetc-font-size-sm);
+  --vetc-divider-label-color:      var(--vetc-color-text-secondary);
+  --vetc-divider-margin-h:         var(--vetc-space-12);
+  --vetc-divider-margin-v:         var(--vetc-space-8);
+
+  /* ── Avatar ─────────────────────────────── */
+  --vetc-avatar-bg-default:        var(--vetc-color-brand);
+  --vetc-avatar-text-color:        var(--vetc-white);
+  --vetc-avatar-size-xl:           56px;
+  --vetc-avatar-size-lg:           48px;
+  --vetc-avatar-size-md:           40px;
+  --vetc-avatar-size-sm:           32px;
+  --vetc-avatar-size-xs:           24px;
+
+  /* ── Switch ─────────────────────────────── */
+  --vetc-switch-width:             52px;
+  --vetc-switch-height:            32px;
+  --vetc-switch-thumb-size:        28px;
+  --vetc-switch-on-bg:             var(--vetc-color-brand);
+  --vetc-switch-off-bg:            var(--vetc-gray-30);
+
+  /* ── Loading / Spinner ──────────────────── */
+  --vetc-spinner-color:            var(--vetc-color-brand);
+  --vetc-spinner-size-sm:          16px;
+  --vetc-spinner-size-md:          24px;
+  --vetc-spinner-size-lg:          40px;
+
+  /* ── Toast ──────────────────────────────── */
+  --vetc-toast-radius:             var(--vetc-radius-md);
+
+  /* ── Transitions ────────────────────────── */
+  --vetc-transition-fast:          150ms ease;
+  --vetc-transition-base:          250ms ease;
+  --vetc-transition-slow:          350ms ease;
+}
+
+/* ════════════════════════════════════════════════════════════
+   8. BASE RESET
+   ════════════════════════════════════════════════════════════ */
+*, *::before, *::after {
+  box-sizing: border-box;
+}