@hyperpackai/hyperui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +60 -65
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,82 +1,77 @@
1
- # @hyperpackai/hyperui
1
+ # HyperUI
2
2
 
3
- > Rich, accessible, enterprise-grade UI component library for Hyperion.
3
+ Enterprise-ready component library with 50+ accessible, responsive components.
4
4
 
5
- ## Install
5
+ [![npm version](https://img.shields.io/npm/v/@hyperpackai/hyperui)](https://www.npmjs.com/package/@hyperpackai/hyperui)
6
+ [![npm downloads](https://img.shields.io/npm/dm/@hyperpackai/hyperui)](https://www.npmjs.com/package/@hyperpackai/hyperui)
6
7
 
7
- ```sh
8
- npm install @hyperpackai/hyperui
9
- ```
10
-
11
- ## Quick start
12
-
13
- ```ts
14
- import { initHyperUI, ThemeProvider, Button, Dialog, DataTable, useToast } from "@hyperpackai/hyperui";
15
- import { applyTheme, createTheme } from "@hyperpackai/hyperui/tokens";
8
+ ## Features
16
9
 
17
- // Initialise with system dark mode
18
- initHyperUI({ theme: "system" });
10
+ - **50+ Components** — Buttons, forms, modals, tables, data grids, and more
11
+ - **WCAG 2.1 AAA** — Full accessibility compliance
12
+ - **Responsive Design** — Mobile-first, works on all screen sizes
13
+ - **Theme-aware** — Support for light, dark, and custom themes
14
+ - **Type-safe** — Full TypeScript support
15
+ - **Enterprise Features** — Data tables, bulk actions, role-based UI, notifications
16
+ - **Zero Configuration** — Works out of the box with sensible defaults
19
17
 
20
- // Or apply a built-in theme preset
21
- applyTheme("compact"); // "default" | "compact" | "comfortable" | "ocean" | "forest" | "sunset" | "violet" | "monochrome" | "highContrast"
18
+ ## Installation
22
19
 
23
- // Or use the provider API with industry themes
24
- ThemeProvider({
25
- theme: "banking",
26
- colorMode: "system",
27
- direction: "ltr",
28
- children: App()
29
- });
30
-
31
- // Build a custom brand theme
32
- const myBrand = createTheme("default", { primaryColor: "#7c3aed", radius: "12px" });
33
- applyTheme(myBrand);
20
+ ```bash
21
+ npm i @hyperpackai/hyperui
34
22
  ```
35
23
 
36
- Industry presets: `banking`, `government`, `healthcare`, `retail`, `education`, `telecom`.
37
-
38
- ## Components
39
-
40
- | Category | Components |
41
- |---|---|
42
- | Form | Form · FormField · FormSection · WizardForm · DynamicForm · ValidationEngine · Button · Label · Input · Textarea · Checkbox · Radio · Switch · Select · TextField · Autocomplete · Slider · Rating · FormControl |
43
- | Date & Time | Calendar · DatePicker · TimePicker · DateTimePicker · DateRangePicker |
44
- | Overlay | Dialog · Modal · Sheet · Drawer · Backdrop · Toast · Snackbar · Tooltip · Popover · DropdownMenu · Menu |
45
- | Layout | Box · Container · Grid · Stack · Paper · Card · PageLayout · DashboardLayout · SplitPane · ResizablePanel · Navbar · Sidebar · Breadcrumb · Pagination · List · ImageList |
46
- | Data | DataGrid · DataTable · VirtualTable · TreeGrid · PivotGrid · AdvancedFilters · SearchBuilder · DataExporter · DataImporter |
47
- | Charts | LineChart · BarChart · PieChart · AreaChart · RadarChart · HeatMap · GaugeChart · Sparkline · FinancialChart · CandlestickChart |
48
- | Enterprise | ApprovalFlow · AuditTrail · PermissionMatrix · RoleManager · FeatureFlags · TenantSelector · NotificationCenter · ActivityFeed · OrgChart · GanttChart · KanbanBoard · WorkflowDesigner · DocumentViewer |
49
- | AI | AIChat · AIForm · AIGrid · AIChart · AIDashboard · AIInsights · AIWizard · AIReport |
50
- | Feedback | Alert · Badge · Avatar · AvatarGroup · Chip · Spinner · Skeleton · Progress |
51
- | Navigation | Tabs · Accordion · Stepper · Timeline · TreeView |
52
- | Typography | Typography · Link · Divider |
24
+ ## Usage
53
25
 
54
- ## Enterprise Architecture
26
+ ```tsx
27
+ import { Button, Card, Input } from "@hyperpackai/hyperui";
55
28
 
56
- HyperUI's production roadmap, package split, component inventory, accessibility standards, testing standards, AI-native patterns, A2UI architecture, and release gates are defined in [ARCHITECTURE.md](./ARCHITECTURE.md).
57
-
58
- Per-component implementation contracts are defined in [COMPONENT_BLUEPRINT.md](./COMPONENT_BLUEPRINT.md).
59
-
60
- ## Design Token System
29
+ export function App() {
30
+ return (
31
+ <Card>
32
+ <h1>Hello World</h1>
33
+ <Input placeholder="Enter text..." />
34
+ <Button>Submit</Button>
35
+ </Card>
36
+ );
37
+ }
38
+ ```
61
39
 
62
- ```ts
63
- import { tokens, useTokens, tokenToCSS, exportTokens } from "@hyperpackai/hyperui/tokens";
40
+ ## Component Categories
41
+
42
+ - **Buttons & Actions** — Button, ButtonGroup, FAB, ToggleButton
43
+ - **Form Controls** — Input, Select, Checkbox, Radio, Textarea, Slider
44
+ - **Data Display** — Card, Table, DataGrid, List, Avatar, Badge
45
+ - **Feedback** — Alert, Dialog, Toast, Snackbar, Progress
46
+ - **Navigation** — Navbar, Sidebar, Breadcrumb, Pagination, Tabs
47
+ - **Overlay** — Modal, Drawer, Popover, Dropdown, Menu
48
+ - **Layout** — Stack, Grid, Container, Box, Paper
49
+ - **AI Components** — AI chat, suggestions, completions
50
+
51
+ ## Theming
52
+
53
+ ```tsx
54
+ import { ThemeProvider, useTheme } from "@hyperpackai/hyperui";
55
+
56
+ export function App() {
57
+ return (
58
+ <ThemeProvider theme="dark">
59
+ <MyApp />
60
+ </ThemeProvider>
61
+ );
62
+ }
63
+ ```
64
64
 
65
- tokens.colors.indigo[500] // "#6366f1"
66
- tokens.spacing[4] // "16px"
67
- tokens.fontSize.xl[0] // "20px"
65
+ ## Customization
68
66
 
69
- // Reactive theme in components
70
- const { isDark } = useTokens();
67
+ All components support customization through CSS variables and theme config.
71
68
 
72
- // SSR head injection
73
- const css = tokenToCSS(myBrand);
69
+ ## Documentation
74
70
 
75
- // Export for Figma / Style Dictionary
76
- const json = exportTokens();
77
- ```
71
+ - [Component Library](https://hyperpack.dev/docs/hyperui/components)
72
+ - [Theming Guide](https://hyperpack.dev/docs/hyperui/theming)
73
+ - [Component Gallery](https://hyperpack.dev/docs)
78
74
 
79
- ## Requirements
75
+ ## License
80
76
 
81
- Node.js ≥ 20 (build) · Modern browser (runtime)
82
- Peer dependency: `@hyperpackai/hyperion ^0.1.0`
77
+ MIT
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hyperpackai/hyperui",
3
- "version": "0.1.0",
4
- "description": "HyperUI \u2014 rich, accessible, enterprise-grade component library for Hyperion with full design token system.",
3
+ "version": "0.2.0",
4
+ "description": "HyperUI — rich, accessible, enterprise-grade component library for Hyperion with full design token system.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -56,7 +56,7 @@
56
56
  "dev": "tsc -b --watch"
57
57
  },
58
58
  "peerDependencies": {
59
- "@hyperpackai/hyperion": "^0.1.0"
59
+ "@hyperpackai/hyperion": ">=0.1.0"
60
60
  },
61
61
  "publishConfig": {
62
62
  "access": "public",