hx components

@hx/components

Design-system driven React component library. All components are built on the reactive model system powered by @hx/data (ERO).

Quick Start

pnpm add @hx/components

import { HxButton, HxInput, HxFlex } from '@hx/components';
import { reactive } from '@hx/data';

const form = reactive({ username: '', password: '' });

<HxFlex direction="dir-y" gapY="md" paddingX="lg">
  <HxInput $model={form} $field="username" placeholder="Username" />
  <HxInput $model={form} $field="password" type="password" />
  <HxButton text="Login" onClick={() => login(form)} />
</HxFlex>

Component Index

Component	Page	Description
Form
Button	→	Action trigger with color/variant system
Input	→	Text/password input with prefix/suffix
FormatInput	→	Formatted number/date/time input
Textarea	→	Multi-line text with auto-grow
Checkbox	→	Single checkbox with value pair
Radio	→	Single radio with deselect support
MCheckbox	→	Multi-checkbox group
MRadio	→	Radio button group
Select	→	Dropdown with filter/sort/clear
DateTimePicker	→	Date/time picker with calendar popup and multi-calendar support
Upload	→	File upload with progress tracking
Layout
Box	→	Container with border/padding
Flex	→	Flexbox with direction/alignment/gap
Grid	→	CSS Grid with 12/15/16 columns
Separator	→	Horizontal/vertical divider
PenetrableBasic	→	Semantic HTML wrappers (HxDiv, HxH1, ...)
Display
Badge	→	Status pill/tag
Label	→	Styled text with hover/active states
Callout	→	Inline alert message
Icons	→	49 SVG icon components
Overlay
Overlay	→	Portal-based modal/drawer/toast system
Alert	→	Modal alert dialog
Toast	→	Non-blocking notification
Popup	→	Anchored popup overlay
Actions	→	Dropdown action menu
Structure
Tabs	→	Tabbed content with header navigation
Panel	→	Collapsible panel with header
Pagination	→	Page navigation with size selector
ButtonBar	→	Horizontal button grouping
Validation
WithCheck	→	Validation HOC + pre-built variants
Shared
Common	→	$model/$field pattern, global config, styling
Design	→	Component code-design philosophy and its advantages
I18n	→	Internationalization system & built-in keys
Data Attributes	→	All data-hx-* attributes per component
Hooks	→	useHxPopupContext, useHxTabs, ...
Utilities	→	computePaginationData, parseFileName, ...

Architecture

• Reactive binding — $model + $field pattern via ERO.getValue()/ERO.setValue(). $model auto-propagates to children.
• Design tokens — Styling via data-* attributes (data-hx-button, data-hx-color). No CSS-in-JS.
• Global config — Each component group exposes configHx*() for defaults, read at render time.
• Event-based — Popups, overlays, tabs, uploads use internal EventEmitter for cross-component communication.