reend-components 0.3.0 → 1.0.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 (9) hide show
  1. package/README.md +47 -9
  2. package/dist/bin/cli.cjs +9578 -0
  3. package/dist/lib/index.cjs +1 -1
  4. package/dist/lib/index.cjs.map +1 -1
  5. package/dist/lib/index.d.ts +383 -14
  6. package/dist/lib/index.mjs +2930 -1105
  7. package/dist/lib/index.mjs.map +1 -1
  8. package/package.json +16 -4
  9. package/src/tailwind-preset.ts +97 -85
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reend-components",
3
- "version": "0.3.0",
3
+ "version": "1.0.0",
4
4
  "private": false,
5
5
  "description": "Tactical, sci-fi, and gaming-inspired React component library — Arknights: Endfield Design System",
6
6
  "type": "module",
@@ -25,8 +25,12 @@
25
25
  "require": "./src/tailwind-preset.ts"
26
26
  }
27
27
  },
28
+ "bin": {
29
+ "reend-ui": "dist/bin/cli.cjs"
30
+ },
28
31
  "files": [
29
32
  "dist/lib",
33
+ "dist/bin",
30
34
  "src/styles",
31
35
  "src/tailwind-preset.ts",
32
36
  "README.md",
@@ -39,7 +43,7 @@
39
43
  "author": "VBeatDead (https://github.com/VBeatDead)",
40
44
  "repository": {
41
45
  "type": "git",
42
- "url": "https://github.com/VBeatDead/ReEnd-Components.git"
46
+ "url": "git+https://github.com/VBeatDead/ReEnd-Components.git"
43
47
  },
44
48
  "bugs": {
45
49
  "url": "https://github.com/VBeatDead/ReEnd-Components/issues"
@@ -80,11 +84,14 @@
80
84
  },
81
85
  "scripts": {
82
86
  "dev": "vite",
83
- "prebuild": "node --experimental-strip-types scripts/generate-llms.ts",
87
+ "prebuild": "node --experimental-strip-types scripts/sync-release.ts",
84
88
  "build": "vite build",
85
89
  "build:dev": "vite build --mode development",
86
90
  "build:lib": "vite build --config vite.lib.config.ts",
87
- "prepublishOnly": "npm run build:lib",
91
+ "build:cli": "node scripts/build-cli.mjs",
92
+ "prepublishOnly": "npm run build:lib && npm run build:cli",
93
+ "version": "node --experimental-strip-types scripts/sync-release.ts && git add CHANGELOG.md public/llms.txt",
94
+ "sync": "node --experimental-strip-types scripts/sync-release.ts",
88
95
  "lint": "eslint .",
89
96
  "preview": "vite preview",
90
97
  "test": "vitest run",
@@ -113,6 +120,7 @@
113
120
  "tailwindcss-animate": "^1.0.7"
114
121
  },
115
122
  "devDependencies": {
123
+ "@codesandbox/sandpack-react": "^2.20.0",
116
124
  "@eslint/js": "^9.32.0",
117
125
  "@testing-library/dom": "^10.4.1",
118
126
  "@testing-library/jest-dom": "^6.6.0",
@@ -123,6 +131,9 @@
123
131
  "@vitejs/plugin-react-swc": "^3.11.0",
124
132
  "@vitest/coverage-v8": "^3.2.4",
125
133
  "autoprefixer": "^10.4.21",
134
+ "chalk": "^5.6.2",
135
+ "commander": "^14.0.3",
136
+ "esbuild": "^0.27.3",
126
137
  "eslint": "^9.32.0",
127
138
  "eslint-plugin-react-hooks": "^5.2.0",
128
139
  "eslint-plugin-react-refresh": "^0.4.20",
@@ -134,6 +145,7 @@
134
145
  "jsdom": "^20.0.3",
135
146
  "lucide-react": "^0.462.0",
136
147
  "postcss": "^8.5.6",
148
+ "prompts": "^2.4.2",
137
149
  "react": "^18.3.1",
138
150
  "react-dom": "^18.3.1",
139
151
  "react-error-boundary": "^6.1.1",
package/src/tailwind-preset.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  /**
2
2
  * ReEnd-Components — Tailwind CSS Preset
3
- * Arknights: Endfield Design System
4
- *
5
3
  * Usage:
6
4
  * // tailwind.config.ts
7
5
  * import reendPreset from "reend-components/tailwind";
@@ -15,6 +13,8 @@
15
13
  */
16
14
 
17
15
  import type { Config } from "tailwindcss";
16
+ import tailwindcssAnimate from "tailwindcss-animate";
17
+ import plugin from "tailwindcss/plugin";
18
18
 
19
19
  const reendPreset: Partial<Config> = {
20
20
  darkMode: ["class"],
@@ -27,7 +27,10 @@ const reendPreset: Partial<Config> = {
27
27
  body: ["Source Han Sans", "Noto Sans SC", "Inter", "sans-serif"],
28
28
  },
29
29
  colors: {
30
- border: "hsl(var(--border))",
30
+ border: {
31
+ DEFAULT: "hsl(var(--border))",
32
+ strong: "hsl(var(--border-strong))",
33
+ },
31
34
  input: "hsl(var(--input))",
32
35
  ring: "hsl(var(--ring))",
33
36
  background: "hsl(var(--background))",
@@ -133,7 +136,6 @@ const reendPreset: Partial<Config> = {
133
136
  },
134
137
  // ─── Keyframes ───────────────────────────────────────────────────────
135
138
  keyframes: {
136
- // Existing
137
139
  "accordion-down": {
138
140
  from: { height: "0" },
139
141
  to: { height: "var(--radix-accordion-content-height)" },
@@ -142,7 +144,6 @@ const reendPreset: Partial<Config> = {
142
144
  from: { height: "var(--radix-accordion-content-height)" },
143
145
  to: { height: "0" },
144
146
  },
145
- // Signature & design system animations
146
147
  fadeIn: {
147
148
  from: { opacity: "0" },
148
149
  to: { opacity: "1" },
@@ -194,6 +195,14 @@ const reendPreset: Partial<Config> = {
194
195
  from: { opacity: "0", transform: "translateY(8px)" },
195
196
  to: { opacity: "1", transform: "translateY(0)" },
196
197
  },
198
+ "dialog-in": {
199
+ from: { opacity: "0", scale: "0.96" },
200
+ to: { opacity: "1", scale: "1" },
201
+ },
202
+ "frequency-bar": {
203
+ "0%": { transform: "scaleY(0.15)" },
204
+ "100%": { transform: "scaleY(1)" },
205
+ },
197
206
  },
198
207
  // ─── Animation utilities ─────────────────────────────────────────────
199
208
  animation: {
@@ -211,96 +220,99 @@ const reendPreset: Partial<Config> = {
211
220
  skeleton: "skeletonShimmer 1.5s infinite",
212
221
  shrink: "shrink 5s linear forwards",
213
222
  "count-up": "countUp 0.4s var(--ease-default, ease) forwards",
223
+ "dialog-in": "dialog-in 0.2s var(--ease-default, ease) forwards",
224
+ "frequency-bar": "frequency-bar 0.8s ease-in-out infinite alternate",
214
225
  },
215
226
  },
216
227
  },
217
228
  plugins: [
218
- // eslint-disable-next-line @typescript-eslint/no-require-imports
219
- require("tailwindcss-animate"),
229
+ tailwindcssAnimate,
220
230
  // ─── Endfield Signature Utilities ────────────────────────────────────
221
- // eslint-disable-next-line @typescript-eslint/no-require-imports
222
- require("tailwindcss/plugin")(({ addUtilities, addComponents }: {
223
- addUtilities: (utilities: Record<string, Record<string, string>>) => void;
224
- addComponents: (components: Record<string, Record<string, string>>) => void;
225
- }) => {
226
- // Clip-corner utilities — Endfield signature cut-corner aesthetic
227
- addComponents({
228
- ".clip-corner": {
229
- "clip-path":
230
- "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))",
231
- },
232
- ".clip-corner-sm": {
233
- "clip-path":
234
- "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))",
235
- },
236
- ".clip-corner-lg": {
237
- "clip-path":
238
- "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))",
239
- },
240
- });
231
+ plugin(
232
+ ({
233
+ addUtilities,
234
+ addComponents,
235
+ }: {
236
+ addUtilities: (
237
+ utilities: Record<string, Record<string, string>>,
238
+ ) => void;
239
+ addComponents: (
240
+ components: Record<string, Record<string, string>>,
241
+ ) => void;
242
+ }) => {
243
+ addComponents({
244
+ ".clip-corner": {
245
+ "clip-path":
246
+ "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))",
247
+ },
248
+ ".clip-corner-sm": {
249
+ "clip-path":
250
+ "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))",
251
+ },
252
+ ".clip-corner-lg": {
253
+ "clip-path":
254
+ "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))",
255
+ },
256
+ });
241
257
 
242
- // Scanline overlay — CRT scan-line texture for HUD panels
243
- addComponents({
244
- ".scanline-overlay": {
245
- position: "relative",
246
- },
247
- ".scanline-overlay::after": {
248
- content: '""',
249
- position: "absolute",
250
- inset: "0",
251
- background:
252
- "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.015) 2px, rgba(255, 255, 255, 0.015) 4px)",
253
- "pointer-events": "none",
254
- "z-index": "1",
255
- },
256
- });
258
+ addComponents({
259
+ ".scanline-overlay": {
260
+ position: "relative",
261
+ },
262
+ ".scanline-overlay::after": {
263
+ content: '""',
264
+ position: "absolute",
265
+ inset: "0",
266
+ background:
267
+ "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.015) 2px, rgba(255, 255, 255, 0.015) 4px)",
268
+ "pointer-events": "none",
269
+ "z-index": "1",
270
+ },
271
+ });
257
272
 
258
- // Skeleton shimmer — includes background gradient (not just animation)
259
- addUtilities({
260
- ".animate-skeleton": {
261
- background:
262
- "linear-gradient(90deg, hsl(var(--surface-1)) 0%, hsl(var(--surface-2)) 50%, hsl(var(--surface-1)) 100%)",
263
- "background-size": "200% 100%",
264
- animation: "skeletonShimmer 1.5s infinite",
265
- },
266
- });
273
+ addUtilities({
274
+ ".animate-skeleton": {
275
+ background:
276
+ "linear-gradient(90deg, hsl(var(--surface-1)) 0%, hsl(var(--surface-2)) 50%, hsl(var(--surface-1)) 100%)",
277
+ "background-size": "200% 100%",
278
+ animation: "skeletonShimmer 1.5s infinite",
279
+ },
280
+ });
267
281
 
268
- // Slide-down — includes transform-origin and overflow (not just animation)
269
- addUtilities({
270
- ".animate-slide-down": {
271
- animation: "slideDown 0.3s ease forwards",
272
- "transform-origin": "top",
273
- overflow: "hidden",
274
- },
275
- });
282
+ addUtilities({
283
+ ".animate-slide-down": {
284
+ animation: "slideDown 0.3s ease forwards",
285
+ "transform-origin": "top",
286
+ overflow: "hidden",
287
+ },
288
+ });
276
289
 
277
- // Glow effects
278
- addUtilities({
279
- ".glow-yellow": {
280
- "box-shadow": "0 0 20px hsl(var(--primary) / 0.2)",
281
- },
282
- ".glow-yellow-strong": {
283
- "box-shadow": "0 0 40px hsl(var(--primary) / 0.3)",
284
- },
285
- ".text-glow-yellow": {
286
- "text-shadow": "0 0 20px hsl(var(--primary) / 0.3)",
287
- },
288
- });
290
+ addUtilities({
291
+ ".glow-yellow": {
292
+ "box-shadow": "0 0 20px hsl(var(--primary) / 0.2)",
293
+ },
294
+ ".glow-yellow-strong": {
295
+ "box-shadow": "0 0 40px hsl(var(--primary) / 0.3)",
296
+ },
297
+ ".text-glow-yellow": {
298
+ "text-shadow": "0 0 20px hsl(var(--primary) / 0.3)",
299
+ },
300
+ });
289
301
 
290
- // Gradient line decorators
291
- addUtilities({
292
- ".gradient-line-h": {
293
- height: "1px",
294
- background:
295
- "linear-gradient(90deg, transparent 0%, hsl(var(--primary)) 50%, transparent 100%)",
296
- },
297
- ".gradient-line-v": {
298
- width: "1px",
299
- background:
300
- "linear-gradient(180deg, transparent 0%, hsl(var(--primary)) 50%, transparent 100%)",
301
- },
302
- });
303
- }),
302
+ addUtilities({
303
+ ".gradient-line-h": {
304
+ height: "1px",
305
+ background:
306
+ "linear-gradient(90deg, transparent 0%, hsl(var(--primary)) 50%, transparent 100%)",
307
+ },
308
+ ".gradient-line-v": {
309
+ width: "1px",
310
+ background:
311
+ "linear-gradient(180deg, transparent 0%, hsl(var(--primary)) 50%, transparent 100%)",
312
+ },
313
+ });
314
+ },
315
+ ),
304
316
  ],
305
317
  };
306
318