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