@vnkr-labs/types

TypeScript type definitions cho VNKR Design System.
Zero runtime code — chỉ là .d.ts thuần tuý.

Cài đặt

npm install --save-dev @vnkr-labs/types
# hoặc
pnpm add -D @vnkr-labs/types

Sử dụng

import type {
  ButtonVariant,
  ThemeMode,
  ColorToken,
  ToastOptions,
  IconProps,
  VNKRLocale,
} from '@vnkr-labs/types';

// Component props
const variant: ButtonVariant = 'primary';
const mode: ThemeMode = 'dark';

// Toast
const toast: ToastOptions = {
  type: 'success',
  message: 'Lưu thành công!',
  duration: 3000,
  position: 'top-right',
};

// Icon
const icon: IconProps = {
  name: 'check',
  style: 'outline',
  size: 24,
  'aria-label': 'Đã xong',
};

// Locale
const locale: VNKRLocale = 'vi';

Types có sẵn

Design Tokens

| Type | Mô tả | |---|---| | ColorToken | Tất cả CSS custom property tên màu (--brand, --accent, ...) | | SpacingToken | --sp-1 → --sp-20, padding presets | | FontSizeToken | --text-xs → --text-hero, heading/body/button sizes | | FontWeightToken | --fw-normal → --fw-extrabold | | RadiusToken | --radius-sm → --radius-full | | ShadowToken | --shadow-xs → --shadow-xl, accent shadow | | TransitionToken | --transition-fast/base/slow | | LayoutToken | --container-max, --nav-height, ... | | DesignToken | Union của tất cả token names |

Theme

| Type | Mô tả | |---|---| | ThemeMode | 'light' \| 'dark' \| 'system' | | ThemeAttribute | 'light' \| 'dark' — giá trị của data-theme |

Component Variants

| Type | Mô tả | |---|---| | ButtonVariant | primary \| outline \| ghost \| danger \| gold | | ButtonSize | giant \| large \| medium \| small | | ToastType | success \| error \| warning \| info | | ToastPosition | 6 vị trí toast | | ToastOptions | Interface đầy đủ cho toast | | BadgeVariant | default \| success \| warning \| error \| info \| gold | | ContentStatus | published \| draft \| review \| archived \| live \| breaking | | ModalSize | sm \| md \| lg \| xl \| full | | InputState | default \| focus \| error \| success \| disabled | | SortDirection | asc \| desc \| none |

Icons

| Type | Mô tả | |---|---| | IconStyle | 'filled' \| 'outline' | | IconProps | Interface đầy đủ cho <Icon /> component |

Utilities

| Type | Mô tả | |---|---| | CurrencyCode | 'VND' \| 'USD' \| 'EUR' | | VNKRLocale | 'vi' \| 'en' | | DateFormat | 'short' \| 'medium' \| 'long' \| 'relative' | | Breakpoint | xs \| sm \| md \| lg \| xl \| 2xl | | HeadingLevel | h1 → h6 |

Peer Packages

Types này được thiết kế để dùng với:

• @vnkr-labs/tokens — CSS design tokens
• @vnkr-labs/ui — UI component library
• @vnkr-labs/utils — Helper functions

VNKR Labs — vnkr.vn