@khoangd/ui

Accessible, props-driven React primitives. Import @khoangd/ui/styles.css once in the consumer entry point.

import { Button, Grid, Input, InputSelect, Stack, Switch, Textarea } from '@khoangd/ui';
import '@khoangd/ui/styles.css';

The package has no WTS store, API, socket, router or trading workflow dependency.

Stable subpaths are available when a resource only needs one layer:

import { Button, Input } from '@khoangd/ui/primitives';
import {
  Checkbox,
  DatePicker,
  FormField,
  InputSelect,
  RadioGroup,
  SegmentedControl,
  Switch,
  Textarea,
} from '@khoangd/ui/forms';
import { Grid, Stack, Wrapper } from '@khoangd/ui/layout';
import { ErrorBoundary, Loading, Overlay, Skeleton } from '@khoangd/ui/feedback';
import { Badge } from '@khoangd/ui/data-display';

InputSelect is a native select intended for local option lists. Search, remote data, translations and Ant Design adapters remain in the consuming application.

IconButton requires an accessible label. Badge and EmptyState accept icon nodes so consumers can use @khoangd/icons without coupling the UI package to a specific icon set.

Shared display components

ImageWithFallback and ErrorView now live here; @khoangd/trading-ui keeps compatibility re-exports. Image fallback recovers when src changes. Load the stylesheet for the image's default aspect ratio/fit/radius without Tailwind.

import { VirtualizedList } from '@khoangd/ui/virtualized-list';

<VirtualizedList
  items={rows}
  itemHeight={32}
  containerHeight={320}
  getItemKey={(row) => row.id}
  renderItem={(row) => <div style={{ height: 32 }}>{row.label}</div>}
  emptyContent={<span>No data</span>}
/>

VirtualizedList supports either renderItem(item, absoluteIndex) or renderContent(visibleItems). Rows must have the specified fixed height; viewport height is controlled by containerHeight. onScroll receives the native scroll event. Routing, data fetching, translations and empty-state assets belong to the consumer. Stable getItemKey values preserve row identity when sorting/filtering.