reend-components 1.1.0 → 1.2.1
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 +175 -106
- package/dist/bin/cli.cjs +290 -229
- package/dist/lib/index.cjs +2 -2
- package/dist/lib/index.cjs.map +1 -1
- package/dist/lib/index.mjs +358 -247
- package/dist/lib/index.mjs.map +1 -1
- package/dist/tailwind/index.cjs +494 -0
- package/dist/tailwind/index.mjs +462 -0
- package/package.json +20 -22
- package/src/tailwind-preset.ts +0 -1
package/README.md
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
[](https://www.npmjs.com/package/reend-components)
|
|
5
5
|
[](LICENSE)
|
|
6
6
|
[](https://github.com/VBeatDead/ReEnd-Components/actions/workflows/ci.yml)
|
|
7
|
+
[](https://bundlephobia.com/package/reend-components)
|
|
7
8
|
|
|
8
9
|
**The only React component library built for tactical, sci-fi, and gaming-inspired UI.**
|
|
9
10
|
|
|
@@ -11,8 +12,8 @@ Not another shadcn clone. Not a Bootstrap wrapper.
|
|
|
11
12
|
ReEnd is for when your app should look like a tactical HUD.
|
|
12
13
|
|
|
13
14
|
→ Dark-first design system (Endfield aesthetic)
|
|
14
|
-
→
|
|
15
|
-
→ CSS variable tokens + Tailwind preset
|
|
15
|
+
→ 75+ components including Signature HUD components
|
|
16
|
+
→ CSS variable tokens + Tailwind preset + CLI tool
|
|
16
17
|
→ TypeScript, Radix UI primitives, accessible
|
|
17
18
|
|
|
18
19
|
[Documentation](https://reend-components.pages.dev) · [GitHub](https://github.com/VBeatDead/ReEnd-Components) · [npm](https://www.npmjs.com/package/reend-components)
|
|
@@ -33,18 +34,16 @@ bun add reend-components
|
|
|
33
34
|
|
|
34
35
|
### Peer Dependencies
|
|
35
36
|
|
|
36
|
-
| Package
|
|
37
|
-
|
|
|
38
|
-
| `react`
|
|
39
|
-
| `react-dom`
|
|
40
|
-
| `tailwindcss`
|
|
41
|
-
| `
|
|
42
|
-
| `lucide-react` | ≥0.400.0 *(optional)*| HoloCard icon prop |
|
|
37
|
+
| Package | Version | Required for |
|
|
38
|
+
| ------------- | --------------------- | -------------------------------- |
|
|
39
|
+
| `react` | ^18.0.0 \|\| ^19.0.0 | All components |
|
|
40
|
+
| `react-dom` | ^18.0.0 \|\| ^19.0.0 | All components |
|
|
41
|
+
| `tailwindcss` | ≥3.4.0 *(optional)* | Tailwind preset |
|
|
42
|
+
| `recharts` | ≥3.0.0 *(optional)* | Chart primitives (`LineChart` …) |
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
npm install
|
|
47
|
-
```
|
|
44
|
+
Everything else (`framer-motion`, `lucide-react`, `react-resizable-panels`,
|
|
45
|
+
Radix UI primitives) is installed automatically as a regular dependency —
|
|
46
|
+
`npm install reend-components` is all you need.
|
|
48
47
|
|
|
49
48
|
---
|
|
50
49
|
|
|
@@ -66,31 +65,26 @@ export default {
|
|
|
66
65
|
};
|
|
67
66
|
```
|
|
68
67
|
|
|
69
|
-
### 2. Import CSS
|
|
68
|
+
### 2. Import CSS
|
|
70
69
|
|
|
71
70
|
```css
|
|
72
71
|
/* In your global CSS file */
|
|
73
72
|
@import "reend-components/variables.css";
|
|
73
|
+
@import "reend-components/utilities.css";
|
|
74
74
|
```
|
|
75
75
|
|
|
76
76
|
### 3. Use Components
|
|
77
77
|
|
|
78
78
|
```tsx
|
|
79
|
-
import {
|
|
80
|
-
Tooltip,
|
|
81
|
-
TooltipTrigger,
|
|
82
|
-
TooltipContent,
|
|
83
|
-
TooltipProvider,
|
|
84
|
-
} from "reend-components";
|
|
79
|
+
import { Button, Badge, OTPInput } from "reend-components";
|
|
85
80
|
|
|
86
81
|
function App() {
|
|
87
82
|
return (
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</TooltipProvider>
|
|
83
|
+
<div>
|
|
84
|
+
<Button variant="primary">Deploy</Button>
|
|
85
|
+
<Badge variant="success">Online</Badge>
|
|
86
|
+
<OTPInput length={6} onComplete={(code) => console.log(code)} />
|
|
87
|
+
</div>
|
|
94
88
|
);
|
|
95
89
|
}
|
|
96
90
|
```
|
|
@@ -101,39 +95,63 @@ Import the pre-built stylesheet instead:
|
|
|
101
95
|
|
|
102
96
|
```tsx
|
|
103
97
|
import "reend-components/styles.css";
|
|
104
|
-
import {
|
|
98
|
+
import { Button } from "reend-components";
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## CLI Tool
|
|
104
|
+
|
|
105
|
+
Copy-paste components directly into your project (shadcn-style):
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
npx reend-ui init # set up config and CSS variables
|
|
109
|
+
npx reend-ui add button # copy button.tsx into your project
|
|
110
|
+
npx reend-ui list # list all available components
|
|
111
|
+
npx reend-ui update button # update a component to latest
|
|
105
112
|
```
|
|
106
113
|
|
|
107
114
|
---
|
|
108
115
|
|
|
109
116
|
## Components
|
|
110
117
|
|
|
111
|
-
### Core
|
|
112
|
-
|
|
113
|
-
| Component
|
|
114
|
-
|
|
|
115
|
-
| `Button`
|
|
116
|
-
| `Badge`
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
118
|
+
### Core — Forms & Input
|
|
119
|
+
|
|
120
|
+
| Component | Description |
|
|
121
|
+
| ---------------- | ----------------------------------------------------------------- |
|
|
122
|
+
| `Button` | 6 variants, 5 sizes, loading state, asChild (Radix Slot) |
|
|
123
|
+
| `Badge` | 7 color variants, removable with `onRemove` |
|
|
124
|
+
| `Input` / `Label`| 3 states, 3 sizes, left/right element slots |
|
|
125
|
+
| `Textarea` | Character counter, all Input states |
|
|
126
|
+
| `Checkbox` | ◆ checked, − indeterminate indicator |
|
|
127
|
+
| `RadioGroup` | ◇→◆ diamond swap pattern |
|
|
128
|
+
| `Switch` | Diamond thumb + spin animation, label / offLabel / onLabel |
|
|
129
|
+
| `Select` | 10 sub-components, danger item variant |
|
|
130
|
+
| `NumberInput` | ±buttons, Arrow↑/↓ keyboard, min/max clamping, 3 sizes |
|
|
131
|
+
| `OTPInput` | 6-digit OTP boxes, Orbitron font, success state, resend cooldown |
|
|
132
|
+
| `DatePicker` | Custom calendar, minDate/maxDate, YYYY.MM.DD format |
|
|
133
|
+
| `FileUpload` | Drag & drop zone, image thumbnails, per-file progress |
|
|
134
|
+
| `RichTextEditor` | Toolbar B/I/U/S/H1-H3, markdown + preview toggle, character count |
|
|
135
|
+
| `Rating` | ◆ diamond star rating, half-star support, readonly mode |
|
|
136
|
+
| `FilterBar` | Multi-filter chip bar with portal dropdown, ARIA listbox |
|
|
137
|
+
|
|
138
|
+
### Core — Display & Layout
|
|
139
|
+
|
|
140
|
+
| Component | Description |
|
|
141
|
+
| -------------- | ------------------------------------------------------------------ |
|
|
142
|
+
| `Card` | Corner-bracket decoration, hoverable/selected variants |
|
|
143
|
+
| `Avatar` | clip-corner-sm shape, 6 sizes, ◆ status dot (4 states) |
|
|
144
|
+
| `Progress` | 4 color variants, indeterminate shimmer |
|
|
145
|
+
| `Accordion` | +/− indicator with 45° rotate, smooth expand/collapse |
|
|
146
|
+
| `Tabs` | 3 variants — underline, pill, bordered |
|
|
147
|
+
| `Popover` | surface-2 panel, fade-in-up animation, z-[100] |
|
|
148
|
+
| `Dialog` | 5 size variants, backdrop-blur overlay, full anatomy |
|
|
149
|
+
| `Separator` | 5 style variants, horizontal + vertical |
|
|
150
|
+
| `Tooltip` | Popup info on hover/focus (Radix-based) |
|
|
151
|
+
| `Stat` | KPI stat card — value, label, delta, trend arrow |
|
|
152
|
+
| `Table` | Sortable columns, striped rows, semantic tokens |
|
|
153
|
+
| `List` | Ordered/unordered list with icon slots and dividers |
|
|
154
|
+
| `Chart` | Recharts wrapper — line, bar, area, pie |
|
|
137
155
|
|
|
138
156
|
### Navigation & Layout
|
|
139
157
|
|
|
@@ -141,65 +159,117 @@ import { Tooltip } from "reend-components";
|
|
|
141
159
|
| ------------ | ------------------------------------------------------------------------ |
|
|
142
160
|
| `Timeline` | Vertical event timeline — ◆/◇ nodes, date, title, description, status |
|
|
143
161
|
| `Stepper` | Horizontal/vertical step tracker — complete/current/upcoming states |
|
|
144
|
-
| `Pagination` | Smart ellipsis page nav — PREV/NEXT + numbered pages
|
|
162
|
+
| `Pagination` | Smart ellipsis page nav — PREV/NEXT + numbered pages |
|
|
145
163
|
| `Breadcrumb` | Hierarchical path nav — custom separator, aria-current on last item |
|
|
164
|
+
| `Footer` | Site footer with columns, links, and brand slot |
|
|
146
165
|
|
|
147
166
|
### Feedback & Utility
|
|
148
167
|
|
|
149
|
-
| Component
|
|
150
|
-
|
|
|
151
|
-
| `Alert`
|
|
152
|
-
| `EmptyState`
|
|
153
|
-
| `SkeletonLine`
|
|
154
|
-
| `SkeletonText`
|
|
155
|
-
| `SkeletonAvatar`
|
|
156
|
-
| `SkeletonCard`
|
|
168
|
+
| Component | Description |
|
|
169
|
+
| ---------------------- | ------------------------------------------------------------------ |
|
|
170
|
+
| `Alert` | Inline alert — info/success/warning/error variants, dismissible |
|
|
171
|
+
| `EmptyState` | Centered empty state — 5 presets, icon/action slots |
|
|
172
|
+
| `SkeletonLine` | Animated skeleton placeholder — 4 variants |
|
|
173
|
+
| `SkeletonText` | Multi-line skeleton block |
|
|
174
|
+
| `SkeletonAvatar` | Diamond-shaped avatar skeleton |
|
|
175
|
+
| `SkeletonCard` | Full card skeleton with optional avatar row |
|
|
176
|
+
| `Toast` / `Toaster` | Notification toasts (Radix-based) |
|
|
177
|
+
| `SonnerToaster` | Alternative toast (Sonner lib) |
|
|
178
|
+
|
|
179
|
+
### Overlay & Interaction
|
|
180
|
+
|
|
181
|
+
| Component | Description |
|
|
182
|
+
| ---------------------- | ------------------------------------------------------------------ |
|
|
183
|
+
| `Dropdown` | Trigger → portal menu with icons and keyboard nav |
|
|
184
|
+
| `ContextMenu` | Right-click context menu with nested groups |
|
|
185
|
+
| `CommandPalette` | ⌘K fuzzy search palette — `useCommandPalette` hook |
|
|
186
|
+
| `CopyClipboard` | Copy-to-clipboard button with success feedback |
|
|
187
|
+
| `CookieConsent` | GDPR consent banner — accept/reject/customize |
|
|
188
|
+
| `SessionTimeoutModal` | Countdown warning modal with progress bar |
|
|
189
|
+
| `BottomSheet` | Mobile drag-to-dismiss bottom sheet with snap points |
|
|
190
|
+
| `Carousel` | Touch + keyboard image/card carousel with dots |
|
|
191
|
+
| `Resizable` | Drag-to-resize panel pair |
|
|
192
|
+
| `BackToTop` | Scroll-to-top button with threshold visibility |
|
|
193
|
+
| `ScrollProgress` | Reading progress bar |
|
|
194
|
+
| `ViewToggle` | Grid/list view toggle button |
|
|
195
|
+
| `SortControl` | Sort direction control with label |
|
|
196
|
+
| `SpoilerBlock` | Blurred spoiler reveal block |
|
|
197
|
+
| `ThemeSwitcher` | Dark/light toggle with bidirectional sync |
|
|
198
|
+
| `PullToRefresh` | Mobile pull-to-refresh gesture wrapper |
|
|
199
|
+
| `SwipeableItem` | Swipe left/right to reveal action buttons |
|
|
200
|
+
|
|
201
|
+
### Hooks
|
|
202
|
+
|
|
203
|
+
| Hook | Description |
|
|
204
|
+
| ------------------ | ----------------------------------------------------------------- |
|
|
205
|
+
| `useToast()` | Programmatic toast notification |
|
|
206
|
+
| `useFocusTrap()` | Trap Tab/Shift+Tab within a container ref |
|
|
207
|
+
| `useShortcut()` | Global keyboard shortcut with meta/ctrl/shift modifiers |
|
|
208
|
+
| `useInView()` | IntersectionObserver — fires when element enters viewport |
|
|
209
|
+
| `useStagger()` | Returns delay array for staggered CSS animations |
|
|
210
|
+
| `cn()` | Utility for merging Tailwind classes (clsx + tailwind-merge) |
|
|
157
211
|
|
|
158
|
-
|
|
212
|
+
```tsx
|
|
213
|
+
import { useInView, useStagger, useFocusTrap } from "reend-components";
|
|
159
214
|
|
|
160
|
-
|
|
215
|
+
// Animate on scroll
|
|
216
|
+
const { ref, inView } = useInView({ threshold: 0.2, once: true });
|
|
161
217
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
> array so animation utilities (`animate-glitch`, `clip-corner`, etc.) are included.
|
|
218
|
+
// Staggered list
|
|
219
|
+
const delays = useStagger(5, 80); // ["0ms", "80ms", "160ms", ...]
|
|
165
220
|
|
|
166
|
-
|
|
167
|
-
|
|
221
|
+
// Focus trap (modal/drawer)
|
|
222
|
+
const containerRef = useFocusTrap<HTMLDivElement>(isOpen);
|
|
168
223
|
```
|
|
169
224
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
| `
|
|
181
|
-
| `
|
|
182
|
-
| `
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
## Signature Components
|
|
228
|
+
|
|
229
|
+
> Endfield-exclusive HUD components. `framer-motion` and `lucide-react` ship with
|
|
230
|
+
> the package — no extra install needed.
|
|
231
|
+
> Add `./node_modules/reend-components/dist/**/*.{js,mjs}` to your Tailwind `content` array.
|
|
232
|
+
|
|
233
|
+
| Component | Description |
|
|
234
|
+
| ---------------- | ------------------------------------------------------------ |
|
|
235
|
+
| `GlitchText` | Animated glitch effect text |
|
|
236
|
+
| `DiamondLoader` | Rotating diamond loading spinner |
|
|
237
|
+
| `TacticalPanel` | HUD-style content panel with status indicator |
|
|
238
|
+
| `HoloCard` | Holographic stat/feature card with hover tilt |
|
|
239
|
+
| `DataStream` | Scrolling live data feed terminal |
|
|
240
|
+
| `TacticalBadge` | Status badge — default/success/warning/danger/info variants |
|
|
241
|
+
| `WarningBanner` | Alert banner — caution/alert/critical severity |
|
|
242
|
+
| `ScanDivider` | Animated scan-line section divider |
|
|
243
|
+
| `CoordinateTag` | HUD coordinate display tag |
|
|
244
|
+
| `RadarChart` | Animated SVG radar/spider chart |
|
|
245
|
+
| `HUDOverlay` | Corner-bracket overlay with crosshair and coords |
|
|
246
|
+
| `MissionCard` | Mission briefing card with progress and status |
|
|
247
|
+
| `OperatorCard` | Operator profile card with stats and role badge |
|
|
248
|
+
| `StatusBar` | System status bar with live indicators |
|
|
249
|
+
| `CommandOutput` | Terminal-style command output stream |
|
|
250
|
+
| `MatrixGrid` | Animated matrix/grid data visualization |
|
|
251
|
+
| `FrequencyBars` | Audio frequency bar visualizer |
|
|
252
|
+
| `TacticalTable` | Keyboard-accessible data table with selectable rows |
|
|
183
253
|
|
|
184
254
|
```tsx
|
|
185
255
|
import {
|
|
186
|
-
TacticalPanel,
|
|
187
256
|
HUDOverlay,
|
|
257
|
+
TacticalPanel,
|
|
258
|
+
OperatorCard,
|
|
188
259
|
RadarChart,
|
|
189
260
|
GlitchText,
|
|
190
261
|
} from "reend-components";
|
|
191
262
|
|
|
192
263
|
function Dashboard() {
|
|
193
264
|
return (
|
|
194
|
-
<HUDOverlay systemLabel="ENDFIELD::
|
|
195
|
-
<TacticalPanel title="OPERATOR
|
|
265
|
+
<HUDOverlay systemLabel="ENDFIELD::OPS">
|
|
266
|
+
<TacticalPanel title="OPERATOR" status="online">
|
|
196
267
|
<GlitchText>DR. AMBROSE</GlitchText>
|
|
197
268
|
<RadarChart
|
|
198
269
|
data={[
|
|
199
270
|
{ label: "ATK", value: 88 },
|
|
200
271
|
{ label: "DEF", value: 62 },
|
|
201
272
|
{ label: "TECH", value: 95 },
|
|
202
|
-
{ label: "SPD", value: 74 },
|
|
203
273
|
]}
|
|
204
274
|
/>
|
|
205
275
|
</TacticalPanel>
|
|
@@ -228,19 +298,19 @@ Dark/light mode: toggle `.light` class on document root.
|
|
|
228
298
|
> All color variables use **HSL values without `hsl()` wrapper** for alpha support:
|
|
229
299
|
> `background: hsl(var(--primary) / 0.5);`
|
|
230
300
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
## Design Tokens
|
|
301
|
+
### Key Design Tokens
|
|
234
302
|
|
|
235
|
-
| Token
|
|
236
|
-
|
|
|
237
|
-
| `--ef-yellow`
|
|
238
|
-
| `--ef-
|
|
239
|
-
| `--ef-
|
|
240
|
-
| `--ef-
|
|
241
|
-
| `--
|
|
242
|
-
| `--
|
|
243
|
-
| `--
|
|
303
|
+
| Token | Purpose | Dark | Light |
|
|
304
|
+
| ----------------- | ----------------- | -------------- | ------------- |
|
|
305
|
+
| `--ef-yellow` | Primary accent | `48 100% 58%` | `42 90% 42%` |
|
|
306
|
+
| `--ef-yellow-glow`| Glow shadow color | `48 100% 58%` | — |
|
|
307
|
+
| `--ef-blue` | Info / links | `201 66% 58%` | — |
|
|
308
|
+
| `--ef-red` | Destructive | `355 100% 64%` | `355 80% 50%` |
|
|
309
|
+
| `--ef-green` | Success | `145 67% 51%` | — |
|
|
310
|
+
| `--background` | Page bg | `0 0% 4%` | `0 0% 97%` |
|
|
311
|
+
| `--foreground` | Text color | `0 0% 94.1%` | `0 0% 8%` |
|
|
312
|
+
| `--text-primary` | Primary text | `0 0% 94.1%` | `0 0% 8%` |
|
|
313
|
+
| `--text-muted` | Muted text | `0 0% 55%` | `0 0% 45%` |
|
|
244
314
|
|
|
245
315
|
[Full token reference →](https://reend-components.pages.dev/docs/foundations)
|
|
246
316
|
|
|
@@ -252,11 +322,12 @@ See [CSS Variable Reference](https://reend-components.pages.dev/docs/foundations
|
|
|
252
322
|
git clone https://github.com/VBeatDead/ReEnd-Components.git
|
|
253
323
|
cd ReEnd-Components
|
|
254
324
|
npm install
|
|
255
|
-
npm run dev
|
|
256
|
-
npm run build
|
|
257
|
-
npm run build:lib
|
|
258
|
-
npm run
|
|
259
|
-
npm run test
|
|
325
|
+
npm run dev # docs dev server at :8080
|
|
326
|
+
npm run build # build docs SPA
|
|
327
|
+
npm run build:lib # build library → dist/lib/
|
|
328
|
+
npm run build:cli # build CLI → dist/bin/cli.cjs
|
|
329
|
+
npm run test # run 1166 tests across 26 files
|
|
330
|
+
npm run lint # ESLint
|
|
260
331
|
```
|
|
261
332
|
|
|
262
333
|
---
|
|
@@ -265,14 +336,12 @@ npm run test:coverage # test + coverage report
|
|
|
265
336
|
|
|
266
337
|
The documentation site supports **English** (default) and **Bahasa Indonesia** via [react-i18next](https://react.i18next.com).
|
|
267
338
|
|
|
268
|
-
### URL Structure
|
|
269
|
-
|
|
270
339
|
| URL Pattern | Language |
|
|
271
340
|
| ---------------------- | ---------- |
|
|
272
341
|
| `/docs/foundations` | English |
|
|
273
342
|
| `/id/docs/foundations` | Indonesian |
|
|
274
343
|
|
|
275
|
-
|
|
344
|
+
16 namespaces × 2 languages, covering all 75+ components and hooks.
|
|
276
345
|
|
|
277
346
|
---
|
|
278
347
|
|