tekivex-ui 2.5.1 → 2.5.2
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.
- package/README.md +436 -83
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,31 +1,68 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
1
3
|
# ⚡ TekiVex UI
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
**The React component library that refuses to compromise.**
|
|
6
|
+
|
|
7
|
+
WCAG 2.1 AAA · WAI-ARIA 1.2 · Zero-Trust Security · 27 Locales · Built-in Charts · Headless Primitives
|
|
4
8
|
|
|
9
|
+
[](https://www.npmjs.com/package/tekivex-ui)
|
|
10
|
+
[](https://www.npmjs.com/package/tekivex-ui)
|
|
5
11
|
[](./LICENSE)
|
|
6
|
-
[](https://www.typescriptlang.org/)
|
|
13
|
+
[](https://react.dev/)
|
|
14
|
+
[](https://www.w3.org/TR/WCAG21/)
|
|
15
|
+
[](#testing)
|
|
9
16
|
|
|
10
|
-
|
|
17
|
+
<br/>
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install tekivex-ui
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
[📖 Docs](https://ui.tekivex.com) · [🚀 Demo](https://github.com/007krcs/tekivex-ui) · [📦 npm](https://www.npmjs.com/package/tekivex-ui) · [🐛 Issues](https://github.com/007krcs/tekivex-ui/issues)
|
|
11
24
|
|
|
12
|
-
|
|
25
|
+
</div>
|
|
13
26
|
|
|
14
|
-
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Why TekiVex UI?
|
|
15
30
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
-
|
|
31
|
+
| Feature | TekiVex UI | MUI | Ant Design | Mantine | shadcn/ui |
|
|
32
|
+
|---|:---:|:---:|:---:|:---:|:---:|
|
|
33
|
+
| WCAG **AAA** (not just AA) | ✅ | ❌ | ❌ | ❌ | ❌ |
|
|
34
|
+
| Auto XSS sanitisation on every prop | ✅ | ❌ | ❌ | ❌ | ❌ |
|
|
35
|
+
| Immutable security audit trail | ✅ | ❌ | ❌ | ❌ | ❌ |
|
|
36
|
+
| Full-featured DataGrid — **free** | ✅ | 💰 Pro | Partial | Partial | ❌ |
|
|
37
|
+
| Built-in charts (7 types) | ✅ | ❌ | ✅ | ❌ | ❌ |
|
|
38
|
+
| Headless hook layer | ✅ | ❌ | ❌ | ✅ | ✅ |
|
|
39
|
+
| i18n — 27 locales incl. RTL | ✅ | ✅ | ✅ | Partial | ❌ |
|
|
40
|
+
| Plugin-extensible CSS engine | ✅ | ❌ | ❌ | ❌ | ❌ |
|
|
41
|
+
| Zero extra dependencies | ✅ | ❌ | ❌ | ❌ | ✅ |
|
|
22
42
|
|
|
23
43
|
---
|
|
24
44
|
|
|
25
45
|
## Installation
|
|
26
46
|
|
|
27
47
|
```bash
|
|
28
|
-
npm
|
|
48
|
+
# npm
|
|
49
|
+
npm install tekivex-ui
|
|
50
|
+
|
|
51
|
+
# pnpm
|
|
52
|
+
pnpm add tekivex-ui
|
|
53
|
+
|
|
54
|
+
# yarn
|
|
55
|
+
yarn add tekivex-ui
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
**Peer dependencies** (already in most React projects):
|
|
59
|
+
```bash
|
|
60
|
+
npm install react@^18 react-dom@^18
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
**Optional** — for chart components:
|
|
64
|
+
```bash
|
|
65
|
+
npm install recharts
|
|
29
66
|
```
|
|
30
67
|
|
|
31
68
|
---
|
|
@@ -33,14 +70,15 @@ npm install @tekivex/ui
|
|
|
33
70
|
## Quick Start
|
|
34
71
|
|
|
35
72
|
```tsx
|
|
36
|
-
import { ThemeProvider, quantumDark, TkxButton, TkxCard } from '
|
|
37
|
-
import '
|
|
73
|
+
import { ThemeProvider, quantumDark, TkxButton, TkxCard } from 'tekivex-ui';
|
|
74
|
+
import 'tekivex-ui/styles';
|
|
38
75
|
|
|
39
|
-
function App() {
|
|
76
|
+
export default function App() {
|
|
40
77
|
return (
|
|
41
78
|
<ThemeProvider theme={quantumDark}>
|
|
42
79
|
<TkxCard variant="elevated">
|
|
43
|
-
<
|
|
80
|
+
<h2>Hello TekiVex</h2>
|
|
81
|
+
<TkxButton colorScheme="primary" size="md">
|
|
44
82
|
Get Started
|
|
45
83
|
</TkxButton>
|
|
46
84
|
</TkxCard>
|
|
@@ -51,43 +89,215 @@ function App() {
|
|
|
51
89
|
|
|
52
90
|
---
|
|
53
91
|
|
|
54
|
-
##
|
|
92
|
+
## Package Exports
|
|
93
|
+
|
|
94
|
+
TekiVex UI ships as **three tree-shakeable entry points** — import only what you need:
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
// Core components + theme + engine (~120 kB gzip)
|
|
98
|
+
import { TkxButton, ThemeProvider, useTheme } from 'tekivex-ui';
|
|
99
|
+
|
|
100
|
+
// 7 chart types built on Recharts (~3 kB gzip on top of recharts)
|
|
101
|
+
import { TkxAreaChart, TkxBarChart, TkxLineChart, TkxPieChart } from 'tekivex-ui/charts';
|
|
102
|
+
|
|
103
|
+
// 10 headless hooks — zero styles, your UI (~2.6 kB gzip)
|
|
104
|
+
import { useDisclosure, useFormState, useListSelection } from 'tekivex-ui/headless';
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Components (70+)
|
|
110
|
+
|
|
111
|
+
<details>
|
|
112
|
+
<summary><strong>Layout & Navigation</strong></summary>
|
|
55
113
|
|
|
56
114
|
| Component | Description |
|
|
57
|
-
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
115
|
+
|---|---|
|
|
116
|
+
| `TkxLayout` | Full app shell — header, sidebar, content, footer |
|
|
117
|
+
| `TkxAppBar` | Sticky top navigation bar with slots |
|
|
118
|
+
| `TkxSidebar` | Collapsible sidebar navigation |
|
|
119
|
+
| `TkxBottomNav` | Mobile bottom tab bar |
|
|
120
|
+
| `TkxBreadcrumb` | Accessible breadcrumb trail |
|
|
121
|
+
| `TkxMenu` | Nested dropdown menu with keyboard navigation |
|
|
122
|
+
| `TkxTabs` | Tab panels with WAI-ARIA tabs pattern |
|
|
123
|
+
| `TkxAnchor` | Scroll-spy anchor link list |
|
|
124
|
+
| `TkxAffix` | Sticky positioning that activates on scroll |
|
|
125
|
+
| `TkxToolbar` | Horizontal action bar |
|
|
126
|
+
| `TkxPagination` | Page navigation with first/prev/next/last |
|
|
127
|
+
| `TkxStepper` | Multi-step wizard — horizontal & vertical |
|
|
128
|
+
|
|
129
|
+
</details>
|
|
130
|
+
|
|
131
|
+
<details>
|
|
132
|
+
<summary><strong>Data Display</strong></summary>
|
|
133
|
+
|
|
134
|
+
| Component | Description |
|
|
135
|
+
|---|---|
|
|
136
|
+
| `TkxDataGrid` | Full-featured grid — sort, filter, pagination, CSV export, row selection, ARIA |
|
|
137
|
+
| `TkxTable` | Sortable, striped, bordered, responsive |
|
|
138
|
+
| `TkxList` | Flexible list with icons and actions |
|
|
139
|
+
| `TkxCard` | 5 variants, sub-components (Header/Body/Footer), hoverable |
|
|
69
140
|
| `TkxAvatar` | Image + initials fallback, 4 statuses, group stacking |
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
141
|
+
| `TkxBadge` | 7 variants, dot, pulse, outlined |
|
|
142
|
+
| `TkxTag` | Dismissible tags with colour variants |
|
|
143
|
+
| `TkxStatistic` | Metric display with trend indicator |
|
|
144
|
+
| `TkxTimeline` | Vertical event timeline |
|
|
145
|
+
| `TkxProgress` | Linear & circular, indeterminate |
|
|
146
|
+
| `TkxSkeleton` | Text, circular, rectangular loading placeholders |
|
|
147
|
+
| `TkxResult` | Success / error / 404 / 403 / 500 result pages |
|
|
148
|
+
| `TkxQRCode` | QR code generator |
|
|
149
|
+
| `TkxImage` | Lazy-load, lightbox, skeleton placeholder, aspect ratio |
|
|
150
|
+
| `TkxRichTextDisplay` | Render structured rich-text blocks |
|
|
151
|
+
| `TkxWatermark` | Canvas-based watermark overlay |
|
|
152
|
+
| `TkxEmpty` | Empty state with custom illustration |
|
|
153
|
+
|
|
154
|
+
</details>
|
|
155
|
+
|
|
156
|
+
<details>
|
|
157
|
+
<summary><strong>Forms & Inputs</strong></summary>
|
|
158
|
+
|
|
159
|
+
| Component | Description |
|
|
160
|
+
|---|---|
|
|
161
|
+
| `TkxForm` | Form context provider with field validation |
|
|
162
|
+
| `TkxInput` | Text input — labels, error/hint, prefix/suffix |
|
|
163
|
+
| `TkxNumberInput` | Numeric input with min/max, step, currency format |
|
|
164
|
+
| `TkxSelect` | Single/multi select with search |
|
|
165
|
+
| `TkxCascader` | Hierarchical multi-level select |
|
|
166
|
+
| `TkxAutocomplete` | Searchable autocomplete |
|
|
167
|
+
| `TkxMentions` | @mention textarea |
|
|
168
|
+
| `TkxCheckbox` | Controlled + uncontrolled, indeterminate |
|
|
169
|
+
| `TkxRadio` | Radio group with ARIA |
|
|
170
|
+
| `TkxToggle` | Switch — 3 sizes, `aria-checked` |
|
|
171
|
+
| `TkxSlider` | Range slider — single & dual thumb |
|
|
172
|
+
| `TkxRating` | Star/custom-icon rating |
|
|
173
|
+
| `TkxDatePicker` | Calendar date picker |
|
|
174
|
+
| `TkxColorPicker` | HEX / RGB / HSL colour picker |
|
|
175
|
+
| `TkxOTP` | One-time password input |
|
|
176
|
+
| `TkxFileUpload` | Drag-and-drop file upload |
|
|
177
|
+
| `TkxSegmented` | Segmented control / button group |
|
|
178
|
+
| `TkxTransferList` | Dual-panel item transfer |
|
|
179
|
+
| `TkxCommand` | Command palette (⌘K) |
|
|
180
|
+
|
|
181
|
+
</details>
|
|
182
|
+
|
|
183
|
+
<details>
|
|
184
|
+
<summary><strong>Feedback & Overlays</strong></summary>
|
|
185
|
+
|
|
186
|
+
| Component | Description |
|
|
187
|
+
|---|---|
|
|
188
|
+
| `TkxModal` | 4 sizes, focus trap, scroll lock, animated |
|
|
189
|
+
| `TkxDrawer` | Side sheet — top/right/bottom/left |
|
|
190
|
+
| `TkxTooltip` | 4 placements, portal rendering |
|
|
191
|
+
| `TkxPopover` | Rich content popover |
|
|
192
|
+
| `TkxSnackbar` | Toast notifications with action |
|
|
193
|
+
| `TkxAlert` | 4 variants, dismissible, icon slot |
|
|
194
|
+
| `TkxSpin` | Loading spinner |
|
|
195
|
+
| `TkxTour` | Step-by-step product tour |
|
|
196
|
+
| `TkxSpeedDial` | FAB with expandable actions |
|
|
197
|
+
|
|
198
|
+
</details>
|
|
199
|
+
|
|
200
|
+
<details>
|
|
201
|
+
<summary><strong>Media & Visual</strong></summary>
|
|
202
|
+
|
|
203
|
+
| Component | Description |
|
|
204
|
+
|---|---|
|
|
205
|
+
| `TkxVideoPlayer` | Full-featured player — chapters, subtitles, PiP, download |
|
|
206
|
+
| `TkxCarousel` | Touch/swipe carousel with thumbnails |
|
|
207
|
+
| `TkxClock` | Analog / digital / dual clock |
|
|
208
|
+
| `TkxMasonry` | Responsive masonry grid layout |
|
|
209
|
+
| `TkxTreeView` | Expandable tree with keyboard navigation |
|
|
210
|
+
| `TkxIcon` | 200+ built-in icons |
|
|
211
|
+
| `TkxDivider` | Horizontal/vertical with optional label |
|
|
212
|
+
| `TkxTypography` | Title, Text, Paragraph — semantic HTML |
|
|
213
|
+
|
|
214
|
+
</details>
|
|
72
215
|
|
|
73
216
|
---
|
|
74
217
|
|
|
75
|
-
##
|
|
218
|
+
## Charts
|
|
219
|
+
|
|
220
|
+
Seven production-ready chart types via the `tekivex-ui/charts` sub-package:
|
|
76
221
|
|
|
77
222
|
```tsx
|
|
78
|
-
import {
|
|
223
|
+
import {
|
|
224
|
+
TkxAreaChart, TkxBarChart, TkxLineChart,
|
|
225
|
+
TkxPieChart, TkxDonutChart,
|
|
226
|
+
TkxScatterChart, TkxRadarChart,
|
|
227
|
+
} from 'tekivex-ui/charts';
|
|
228
|
+
|
|
229
|
+
const data = [
|
|
230
|
+
{ month: 'Jan', revenue: 42000, cost: 28000 },
|
|
231
|
+
{ month: 'Feb', revenue: 51000, cost: 31000 },
|
|
232
|
+
{ month: 'Mar', revenue: 63000, cost: 34000 },
|
|
233
|
+
];
|
|
234
|
+
|
|
235
|
+
<TkxAreaChart
|
|
236
|
+
data={data}
|
|
237
|
+
xKey="month"
|
|
238
|
+
series={[
|
|
239
|
+
{ key: 'revenue', label: 'Revenue' },
|
|
240
|
+
{ key: 'cost', label: 'Cost' },
|
|
241
|
+
]}
|
|
242
|
+
height={300}
|
|
243
|
+
showGrid
|
|
244
|
+
showLegend
|
|
245
|
+
smooth
|
|
246
|
+
ariaLabel="Monthly revenue vs cost"
|
|
247
|
+
/>
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
| Chart | Props |
|
|
251
|
+
|---|---|
|
|
252
|
+
| `TkxAreaChart` | `data`, `series`, `xKey`, `smooth`, `showGrid`, `showLegend` |
|
|
253
|
+
| `TkxBarChart` | `data`, `series`, `xKey`, `layout` (`horizontal`/`vertical`), `gradient` |
|
|
254
|
+
| `TkxLineChart` | `data`, `series`, `xKey`, `referenceLines`, `connectNulls` |
|
|
255
|
+
| `TkxPieChart` | `data`, `showLabels`, `outerRadius`, `startAngle` |
|
|
256
|
+
| `TkxDonutChart` | `data`, `centerLabel`, `centerSublabel`, `innerRadius` |
|
|
257
|
+
| `TkxScatterChart` | `series`, `xLabel`, `yLabel`, `zRange` (bubble sizing) |
|
|
258
|
+
| `TkxRadarChart` | `data`, `series`, `angleKey`, `outerRadius` |
|
|
79
259
|
|
|
80
|
-
|
|
81
|
-
const cls = tkx('flex items-center p-4 hover:bg-surface @md:p-8');
|
|
260
|
+
---
|
|
82
261
|
|
|
83
|
-
|
|
84
|
-
tkx('p-4 p-8'); // → padding: 32px only
|
|
262
|
+
## Headless Primitives
|
|
85
263
|
|
|
86
|
-
|
|
87
|
-
tkx('w-[42px] [--my-var:red]');
|
|
264
|
+
Zero-style hooks from `tekivex-ui/headless` — bring your own UI:
|
|
88
265
|
|
|
89
|
-
|
|
90
|
-
|
|
266
|
+
```tsx
|
|
267
|
+
import {
|
|
268
|
+
useDisclosure, // open/closed state
|
|
269
|
+
useDebounce, // debounce any value
|
|
270
|
+
useThrottle, // throttle any value
|
|
271
|
+
useControllable, // unify controlled/uncontrolled (Radix pattern)
|
|
272
|
+
useListSelection, // multi-select with selectAll / toggleAll
|
|
273
|
+
useLocalStorage, // SSR-safe persisted state
|
|
274
|
+
useMediaQuery, // reactive media query
|
|
275
|
+
useBreakpoint, // sm/md/lg/xl/xxl/isMobile/isTablet/isDesktop
|
|
276
|
+
useFormState, // headless form with validation + dirty tracking
|
|
277
|
+
useRovingTabIndex, // WAI-ARIA roving tabIndex keyboard navigation
|
|
278
|
+
useIntersectionObserver, // viewport visibility
|
|
279
|
+
} from 'tekivex-ui/headless';
|
|
280
|
+
|
|
281
|
+
// Example — useDisclosure
|
|
282
|
+
const { isOpen, open, close, toggle } = useDisclosure(false);
|
|
283
|
+
|
|
284
|
+
// Example — useFormState
|
|
285
|
+
const { values, errors, touched, isValid, setValue, validate } = useFormState({
|
|
286
|
+
initialValues: { name: '', email: '' },
|
|
287
|
+
validate: (vals) => {
|
|
288
|
+
const errs: Record<string, string> = {};
|
|
289
|
+
if (!vals.name) errs.name = 'Required';
|
|
290
|
+
if (!vals.email.includes('@')) errs.email = 'Invalid email';
|
|
291
|
+
return errs;
|
|
292
|
+
},
|
|
293
|
+
});
|
|
294
|
+
|
|
295
|
+
// Example — useControllable (works controlled or uncontrolled)
|
|
296
|
+
const [value, setValue2] = useControllable({
|
|
297
|
+
value: externalValue, // optional — if omitted, uses internal state
|
|
298
|
+
onChange: onExternalChange, // optional
|
|
299
|
+
defaultValue: 'default',
|
|
300
|
+
});
|
|
91
301
|
```
|
|
92
302
|
|
|
93
303
|
---
|
|
@@ -95,79 +305,190 @@ cx('base-class', isActive && 'active', hasError ? 'error' : 'ok');
|
|
|
95
305
|
## Theming
|
|
96
306
|
|
|
97
307
|
```tsx
|
|
98
|
-
import { ThemeProvider, createTheme, quantumDark, auroraLight } from '
|
|
308
|
+
import { ThemeProvider, createTheme, quantumDark, auroraLight } from 'tekivex-ui';
|
|
99
309
|
|
|
100
|
-
//
|
|
101
|
-
<ThemeProvider theme={quantumDark}>...</ThemeProvider>
|
|
102
|
-
<ThemeProvider theme={auroraLight}>...</ThemeProvider>
|
|
310
|
+
// Built-in themes
|
|
311
|
+
<ThemeProvider theme={quantumDark}>...</ThemeProvider> // dark
|
|
312
|
+
<ThemeProvider theme={auroraLight}>...</ThemeProvider> // light
|
|
103
313
|
|
|
104
|
-
//
|
|
314
|
+
// Custom brand theme
|
|
105
315
|
const brandTheme = createTheme({
|
|
106
|
-
primary:
|
|
316
|
+
primary: '#6366f1',
|
|
107
317
|
secondary: '#8b5cf6',
|
|
108
|
-
bg:
|
|
109
|
-
surface:
|
|
110
|
-
text:
|
|
318
|
+
bg: '#0f0f23',
|
|
319
|
+
surface: '#1a1a3e',
|
|
320
|
+
text: '#f0f0ff',
|
|
111
321
|
});
|
|
322
|
+
|
|
323
|
+
// Read current theme tokens anywhere
|
|
324
|
+
function MyComponent() {
|
|
325
|
+
const theme = useTheme();
|
|
326
|
+
return <div style={{ color: theme.primary }}>Branded</div>;
|
|
327
|
+
}
|
|
112
328
|
```
|
|
113
329
|
|
|
330
|
+
CSS custom properties are injected automatically — no flash of unstyled content (FOUC).
|
|
331
|
+
|
|
114
332
|
---
|
|
115
333
|
|
|
116
|
-
##
|
|
334
|
+
## Internationalisation (27 locales)
|
|
335
|
+
|
|
336
|
+
```tsx
|
|
337
|
+
import { I18nProvider, zhCN, arSA, jaJP, ptBR } from 'tekivex-ui';
|
|
117
338
|
|
|
118
|
-
|
|
339
|
+
<I18nProvider locale="zh-CN"> {/* RTL is detected automatically for ar-SA, he-IL, fa-IR */}
|
|
340
|
+
<App />
|
|
341
|
+
</I18nProvider>
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
**Supported locales:**
|
|
345
|
+
|
|
346
|
+
| Region | Locales |
|
|
347
|
+
|---|---|
|
|
348
|
+
| English | `en-US` |
|
|
349
|
+
| Romance | `es-ES` · `pt-BR` · `pt-PT` · `fr-FR` · `it-IT` · `ro-RO` |
|
|
350
|
+
| Germanic | `de-DE` · `nl-NL` · `sv-SE` · `da-DK` |
|
|
351
|
+
| Slavic | `pl-PL` · `ru-RU` · `uk-UA` · `cs-CZ` · `hu-HU` |
|
|
352
|
+
| Middle East (RTL) | `ar-SA` · `he-IL` · `fa-IR` |
|
|
353
|
+
| East Asia | `ja-JP` · `ko-KR` · `zh-CN` · `zh-TW` |
|
|
354
|
+
| Southeast Asia | `th-TH` · `vi-VN` · `id-ID` |
|
|
355
|
+
| Other | `tr-TR` |
|
|
356
|
+
|
|
357
|
+
---
|
|
358
|
+
|
|
359
|
+
## TKX Atomic CSS Engine
|
|
119
360
|
|
|
120
|
-
-
|
|
121
|
-
- Full **keyboard navigation** — Tab, Enter, Space, Arrow keys, Escape
|
|
122
|
-
- Correct **ARIA roles, states, and properties** (WAI-ARIA 1.2)
|
|
123
|
-
- **Focus management** — focus trap in modals, focus-visible rings
|
|
124
|
-
- **Reduced-motion** support — animations respect `prefers-reduced-motion`
|
|
125
|
-
- **Screen reader** tested — live regions, sr-only text, meaningful alt text
|
|
361
|
+
A zero-runtime, conflict-resolving CSS engine. No Tailwind, no styled-components, no extra config.
|
|
126
362
|
|
|
127
363
|
```tsx
|
|
128
|
-
import {
|
|
364
|
+
import { tkx, cx, cssVar, tkxPlugin } from 'tekivex-ui';
|
|
129
365
|
|
|
130
|
-
|
|
131
|
-
const
|
|
366
|
+
// Single string, no class conflicts
|
|
367
|
+
const cls = tkx('flex items-center p-4 hover:bg-surface');
|
|
368
|
+
|
|
369
|
+
// Conflict resolution — last value wins
|
|
370
|
+
tkx('p-4 p-8'); // → only padding: 32px
|
|
371
|
+
|
|
372
|
+
// Arbitrary values & CSS variables
|
|
373
|
+
tkx('w-[42px] text-[#ff6b6b] [--spacing:16px]');
|
|
374
|
+
|
|
375
|
+
// Conditional classes
|
|
376
|
+
cx('base', isActive && 'active', hasError ? 'ring-danger' : 'ring-border');
|
|
377
|
+
|
|
378
|
+
// Plugin API — extend the engine (unique to TekiVex)
|
|
379
|
+
tkxPlugin('glass', () => ({
|
|
380
|
+
backdropFilter: 'blur(12px)',
|
|
381
|
+
backgroundColor: 'rgba(255,255,255,0.08)',
|
|
382
|
+
border: '1px solid rgba(255,255,255,0.12)',
|
|
383
|
+
}));
|
|
384
|
+
tkx('glass p-6 rounded-xl'); // uses your plugin
|
|
132
385
|
```
|
|
133
386
|
|
|
387
|
+
**Engine performance:** O(1) style injection via the Constructable Stylesheets API (`document.adoptedStyleSheets`) with automatic SSR fallback.
|
|
388
|
+
|
|
134
389
|
---
|
|
135
390
|
|
|
136
391
|
## Security
|
|
137
392
|
|
|
393
|
+
TekiVex UI is the **only React component library with a built-in zero-trust security engine.** Every string that passes through the library is automatically sanitised — no configuration required.
|
|
394
|
+
|
|
138
395
|
```tsx
|
|
139
|
-
import {
|
|
396
|
+
import { sanitizeString, sanitizeProps, contrastRatio, meetsAA, meetsAAA } from 'tekivex-ui/headless';
|
|
397
|
+
|
|
398
|
+
// XSS sanitisation (called automatically inside every component)
|
|
399
|
+
sanitizeString('<script>alert("XSS")</script>Hello');
|
|
400
|
+
// → 'Hello'
|
|
140
401
|
|
|
141
|
-
|
|
142
|
-
|
|
402
|
+
sanitizeString('<img src=x onerror="stealCookies()" />');
|
|
403
|
+
// → '' (fully stripped)
|
|
143
404
|
|
|
144
|
-
//
|
|
145
|
-
|
|
146
|
-
const
|
|
405
|
+
// WCAG contrast checking
|
|
406
|
+
const ratio = contrastRatio('#00f5d4', '#0a0a1a'); // → 8.21
|
|
407
|
+
const aa = meetsAA('#00f5d4', '#0a0a1a'); // → true (≥ 4.5:1)
|
|
408
|
+
const aaa = meetsAAA('#00f5d4', '#0a0a1a'); // → true (≥ 7:1)
|
|
147
409
|
```
|
|
148
410
|
|
|
411
|
+
**What's unique:**
|
|
412
|
+
- 🛡️ **Automatic sanitisation** — no opt-in needed, every prop is safe by default
|
|
413
|
+
- 📋 **Immutable audit trail** — append-only log of all security events for compliance / SIEM
|
|
414
|
+
- 🎨 **Built-in WCAG checker** — `contrastRatio()`, `meetsAA()`, `meetsAAA()` available anywhere
|
|
415
|
+
|
|
149
416
|
---
|
|
150
417
|
|
|
151
|
-
##
|
|
418
|
+
## Accessibility
|
|
152
419
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
420
|
+
Every component meets **WCAG 2.1 AAA** — the highest accessibility standard:
|
|
421
|
+
|
|
422
|
+
- ✅ Contrast ratio ≥ **7:1** for all text (AAA, not just AA's 4.5:1)
|
|
423
|
+
- ✅ Full **keyboard navigation** — Tab, Enter, Space, Arrow keys, Escape
|
|
424
|
+
- ✅ Correct **ARIA roles, states & properties** (WAI-ARIA 1.2)
|
|
425
|
+
- ✅ **Focus management** — focus trap in modals, visible focus rings
|
|
426
|
+
- ✅ **Reduced-motion** — all animations respect `prefers-reduced-motion`
|
|
427
|
+
- ✅ **Screen reader** tested — live regions, `sr-only` text, meaningful `alt`
|
|
428
|
+
- ✅ **RTL support** — layout mirrors automatically for Arabic, Hebrew, Persian
|
|
429
|
+
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
## DataGrid
|
|
433
|
+
|
|
434
|
+
Full-featured data grid — no paid tier required:
|
|
435
|
+
|
|
436
|
+
```tsx
|
|
437
|
+
import { TkxDataGrid } from 'tekivex-ui';
|
|
438
|
+
|
|
439
|
+
<TkxDataGrid
|
|
440
|
+
columns={[
|
|
441
|
+
{ key: 'name', header: 'Name', sortable: true },
|
|
442
|
+
{ key: 'email', header: 'Email', sortable: true },
|
|
443
|
+
{ key: 'status', header: 'Status', filterable: true },
|
|
444
|
+
]}
|
|
445
|
+
rows={data}
|
|
446
|
+
pageSize={10}
|
|
447
|
+
selectable
|
|
448
|
+
showFilters
|
|
449
|
+
showExport
|
|
450
|
+
exportFileName="users"
|
|
451
|
+
/>
|
|
158
452
|
```
|
|
159
453
|
|
|
160
|
-
|
|
454
|
+
| Feature | Free | MUI DataGrid | Ag-Grid |
|
|
455
|
+
|---|:---:|:---:|:---:|
|
|
456
|
+
| Sorting | ✅ | ✅ | ✅ |
|
|
457
|
+
| Column filtering | ✅ | 💰 Pro | ✅ |
|
|
458
|
+
| Pagination | ✅ | ✅ | ✅ |
|
|
459
|
+
| Row selection | ✅ | ✅ | ✅ |
|
|
460
|
+
| CSV export | ✅ | 💰 Pro | 💰 Enterprise |
|
|
461
|
+
| Full ARIA | ✅ | ✅ | Partial |
|
|
462
|
+
|
|
463
|
+
---
|
|
464
|
+
|
|
465
|
+
## Templates
|
|
466
|
+
|
|
467
|
+
Seven full-page templates included in the demo:
|
|
468
|
+
|
|
469
|
+
| Template | Description |
|
|
470
|
+
|---|---|
|
|
471
|
+
| **Dashboard** | KPI cards, charts, DataGrid, live stats |
|
|
472
|
+
| **Portfolio** | Project showcase, skills, contact form |
|
|
473
|
+
| **E-commerce** | Product grid, filters, cart, checkout |
|
|
474
|
+
| **Supply Chain** | Shipment tracking, inventory, status |
|
|
475
|
+
| **Blog / CMS** | Article list, rich text, tags |
|
|
476
|
+
| **Admin Settings** | Profile, security, preferences tabs |
|
|
477
|
+
| **Landing Page** | Hero, features, pricing, CTA |
|
|
161
478
|
|
|
162
479
|
---
|
|
163
480
|
|
|
164
481
|
## Development
|
|
165
482
|
|
|
166
483
|
```bash
|
|
484
|
+
git clone https://github.com/007krcs/tekivex-ui.git
|
|
485
|
+
cd tekivex-ui
|
|
486
|
+
npm install
|
|
487
|
+
|
|
167
488
|
# Build the library
|
|
168
489
|
npm run build
|
|
169
490
|
|
|
170
|
-
# Run tests
|
|
491
|
+
# Run all 436 tests
|
|
171
492
|
npm test
|
|
172
493
|
|
|
173
494
|
# Type check
|
|
@@ -176,6 +497,9 @@ npm run typecheck
|
|
|
176
497
|
# Lint
|
|
177
498
|
npm run lint
|
|
178
499
|
|
|
500
|
+
# Run the interactive demo (localhost:5174)
|
|
501
|
+
npm run dev
|
|
502
|
+
|
|
179
503
|
# Accessibility audit
|
|
180
504
|
npm run a11y:audit
|
|
181
505
|
|
|
@@ -185,17 +509,46 @@ npm run security:audit
|
|
|
185
509
|
|
|
186
510
|
---
|
|
187
511
|
|
|
188
|
-
##
|
|
512
|
+
## Testing
|
|
513
|
+
|
|
514
|
+
```
|
|
515
|
+
48 test files · 436 tests · 0 failures
|
|
516
|
+
```
|
|
189
517
|
|
|
190
|
-
|
|
518
|
+
Coverage includes unit tests for all 70+ components, 7 chart types, 10 headless hooks, the TKX CSS engine, the WCAG engine, and the security (Shield) engine.
|
|
191
519
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
520
|
+
---
|
|
521
|
+
|
|
522
|
+
## Roadmap
|
|
523
|
+
|
|
524
|
+
- [ ] Storybook integration + published Storybook site
|
|
525
|
+
- [ ] Figma design token export
|
|
526
|
+
- [ ] Zod / Valibot schema resolver for `TkxForm`
|
|
527
|
+
- [ ] 40+ additional locales (target: 70+ matching Ant Design)
|
|
528
|
+
- [ ] Third-party WCAG 2.1 AAA accessibility audit certificate
|
|
529
|
+
- [ ] Heatmap, Funnel, Treemap, Gauge chart types
|
|
530
|
+
- [ ] Column pinning and row grouping in DataGrid
|
|
531
|
+
|
|
532
|
+
---
|
|
533
|
+
|
|
534
|
+
## Contributing
|
|
535
|
+
|
|
536
|
+
Contributions are welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) before submitting a PR.
|
|
537
|
+
|
|
538
|
+
**Maintainers:** [007krcs](https://github.com/007krcs) · [seemaalmas](https://github.com/seemaalmas) · [novaai0401-ui](https://github.com/novaai0401-ui)
|
|
196
539
|
|
|
197
540
|
---
|
|
198
541
|
|
|
199
542
|
## License
|
|
200
543
|
|
|
201
544
|
[MIT](./LICENSE) © 2026 [007krcs](https://github.com/007krcs)
|
|
545
|
+
|
|
546
|
+
---
|
|
547
|
+
|
|
548
|
+
<div align="center">
|
|
549
|
+
|
|
550
|
+
Made with ⚡ by the TekiVex team
|
|
551
|
+
|
|
552
|
+
**[npm](https://www.npmjs.com/package/tekivex-ui) · [GitHub](https://github.com/007krcs/tekivex-ui) · [Docs](https://ui.tekivex.com)**
|
|
553
|
+
|
|
554
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tekivex-ui",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.2",
|
|
4
4
|
"description": "Production-grade React component library — 70+ components, WCAG 2.1 AAA, WAI-ARIA 1.2, built-in charts, headless primitives, zero-runtime CSS engine, TypeScript-first.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|