reend-components 1.1.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.
@@ -0,0 +1,492 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/tailwind-preset.ts
30
+ var tailwind_preset_exports = {};
31
+ __export(tailwind_preset_exports, {
32
+ default: () => tailwind_preset_default
33
+ });
34
+ module.exports = __toCommonJS(tailwind_preset_exports);
35
+ var import_tailwindcss_animate = __toESM(require("tailwindcss-animate"), 1);
36
+ var import_plugin = __toESM(require("tailwindcss/plugin.js"), 1);
37
+ var reendPreset = {
38
+ darkMode: ["class"],
39
+ theme: {
40
+ extend: {
41
+ fontFamily: {
42
+ display: ["Orbitron", "monospace"],
43
+ ui: ["Orbitron", "monospace"],
44
+ mono: ["JetBrains Mono", "Courier New", "monospace"],
45
+ body: ["Source Han Sans", "Noto Sans SC", "Inter", "sans-serif"]
46
+ },
47
+ colors: {
48
+ border: {
49
+ DEFAULT: "hsl(var(--border))",
50
+ strong: "hsl(var(--border-strong))"
51
+ },
52
+ input: "hsl(var(--input))",
53
+ ring: "hsl(var(--ring))",
54
+ background: "hsl(var(--background))",
55
+ foreground: "hsl(var(--foreground))",
56
+ primary: {
57
+ DEFAULT: "hsl(var(--primary))",
58
+ foreground: "hsl(var(--primary-foreground))"
59
+ },
60
+ secondary: {
61
+ DEFAULT: "hsl(var(--secondary))",
62
+ foreground: "hsl(var(--secondary-foreground))"
63
+ },
64
+ destructive: {
65
+ DEFAULT: "hsl(var(--destructive))",
66
+ foreground: "hsl(var(--destructive-foreground))"
67
+ },
68
+ muted: {
69
+ DEFAULT: "hsl(var(--muted))",
70
+ foreground: "hsl(var(--muted-foreground))"
71
+ },
72
+ accent: {
73
+ DEFAULT: "hsl(var(--accent))",
74
+ foreground: "hsl(var(--accent-foreground))"
75
+ },
76
+ popover: {
77
+ DEFAULT: "hsl(var(--popover))",
78
+ foreground: "hsl(var(--popover-foreground))"
79
+ },
80
+ card: {
81
+ DEFAULT: "hsl(var(--card))",
82
+ foreground: "hsl(var(--card-foreground))"
83
+ },
84
+ ef: {
85
+ black: "hsl(var(--ef-black))",
86
+ "black-soft": "hsl(var(--ef-black-soft))",
87
+ "black-muted": "hsl(var(--ef-black-muted))",
88
+ "dark-gray": "hsl(var(--ef-dark-gray))",
89
+ gray: "hsl(var(--ef-gray))",
90
+ "gray-mid": "hsl(var(--ef-gray-mid))",
91
+ "gray-light": "hsl(var(--ef-gray-light))",
92
+ "white-muted": "hsl(var(--ef-white-muted))",
93
+ "white-soft": "hsl(var(--ef-white-soft))",
94
+ white: "hsl(var(--ef-white))",
95
+ "pure-white": "hsl(var(--ef-pure-white))",
96
+ yellow: "hsl(var(--ef-yellow))",
97
+ "yellow-dark": "hsl(var(--ef-yellow-dark))",
98
+ lime: "hsl(var(--ef-lime))",
99
+ "lime-dark": "hsl(var(--ef-lime-dark))",
100
+ blue: "hsl(var(--ef-blue))",
101
+ "blue-light": "hsl(var(--ef-blue-light))",
102
+ "blue-dark": "hsl(var(--ef-blue-dark))",
103
+ cyan: "hsl(var(--ef-cyan))",
104
+ red: "hsl(var(--ef-red))",
105
+ green: "hsl(var(--ef-green))",
106
+ orange: "hsl(var(--ef-orange))",
107
+ purple: "hsl(var(--ef-purple))"
108
+ },
109
+ surface: {
110
+ canvas: "hsl(var(--surface-canvas))",
111
+ 0: "hsl(var(--surface-0))",
112
+ 1: "hsl(var(--surface-1))",
113
+ 2: "hsl(var(--surface-2))",
114
+ 3: "hsl(var(--surface-3))",
115
+ hover: "hsl(var(--surface-hover))",
116
+ active: "hsl(var(--surface-active))"
117
+ },
118
+ chart: {
119
+ 1: "var(--chart-1)",
120
+ 2: "var(--chart-2)",
121
+ 3: "var(--chart-3)",
122
+ 4: "var(--chart-4)",
123
+ 5: "var(--chart-5)",
124
+ 6: "var(--chart-6)",
125
+ 7: "var(--chart-7)",
126
+ 8: "var(--chart-8)"
127
+ }
128
+ },
129
+ // ─── Opacity scale ────────────────────────────────────────────────────
130
+ opacity: {
131
+ overlay: "var(--opacity-overlay)",
132
+ hover: "var(--opacity-hover)",
133
+ disabled: "var(--opacity-disabled)",
134
+ border: "var(--opacity-border)",
135
+ focus: "var(--opacity-focus)",
136
+ muted: "var(--opacity-muted)"
137
+ },
138
+ borderRadius: {
139
+ lg: "var(--radius)",
140
+ md: "calc(var(--radius) - 2px)",
141
+ sm: "calc(var(--radius) - 4px)"
142
+ },
143
+ // ─── Shadows referencing CSS vars ───────────────────────────────────
144
+ boxShadow: {
145
+ sm: "var(--shadow-sm)",
146
+ md: "var(--shadow-md)",
147
+ lg: "var(--shadow-lg)",
148
+ glow: "var(--shadow-glow)",
149
+ "glow-sm": "var(--shadow-glow-sm)",
150
+ "glow-md": "var(--shadow-glow-md)",
151
+ "glow-lg": "var(--shadow-glow-lg)",
152
+ accent: "var(--shadow-accent)"
153
+ },
154
+ // ─── Z-Index scale matching CSS vars ────────────────────────────────
155
+ zIndex: {
156
+ below: "-1",
157
+ base: "0",
158
+ raised: "1",
159
+ dropdown: "100",
160
+ sticky: "200",
161
+ header: "1000",
162
+ overlay: "1500",
163
+ modal: "2000",
164
+ toast: "3000",
165
+ tooltip: "4000",
166
+ max: "9999"
167
+ },
168
+ // ─── Transition durations matching CSS vars ──────────────────────────
169
+ transitionDuration: {
170
+ instant: "100ms",
171
+ fast: "150ms",
172
+ normal: "300ms",
173
+ slow: "500ms",
174
+ slower: "800ms"
175
+ },
176
+ // ─── Transition easing matching CSS vars ─────────────────────────────
177
+ transitionTimingFunction: {
178
+ default: "cubic-bezier(0.25, 0.8, 0.25, 1)",
179
+ bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
180
+ sharp: "cubic-bezier(0.4, 0, 0.2, 1)",
181
+ smooth: "cubic-bezier(0.45, 0, 0.55, 1)"
182
+ },
183
+ // ─── Type scale (v3.0) ───────────────────────────────────────────────
184
+ fontSize: {
185
+ "display-xl": [
186
+ "var(--type-display-xl-size,72px)",
187
+ { lineHeight: "var(--lh-display,0.95)" }
188
+ ],
189
+ "display-lg": [
190
+ "var(--type-display-lg-size,56px)",
191
+ { lineHeight: "var(--lh-display,0.95)" }
192
+ ],
193
+ h1: [
194
+ "var(--type-h1-size,48px)",
195
+ { lineHeight: "var(--lh-heading,1.0)" }
196
+ ],
197
+ h2: [
198
+ "var(--type-h2-size,36px)",
199
+ { lineHeight: "var(--lh-heading,1.0)" }
200
+ ],
201
+ h3: [
202
+ "var(--type-h3-size,28px)",
203
+ { lineHeight: "var(--lh-heading,1.0)" }
204
+ ],
205
+ h4: [
206
+ "var(--type-h4-size,22px)",
207
+ { lineHeight: "var(--lh-heading,1.0)" }
208
+ ],
209
+ "body-lg": [
210
+ "var(--type-body-lg-size,18px)",
211
+ { lineHeight: "var(--lh-body,1.6)" }
212
+ ],
213
+ body: [
214
+ "var(--type-body-size,16px)",
215
+ { lineHeight: "var(--lh-body,1.6)" }
216
+ ],
217
+ "body-sm": [
218
+ "var(--type-body-sm-size,14px)",
219
+ { lineHeight: "var(--lh-body,1.6)" }
220
+ ],
221
+ caption: [
222
+ "var(--type-caption-size,12px)",
223
+ { lineHeight: "var(--lh-caption,1.4)" }
224
+ ],
225
+ overline: [
226
+ "var(--type-overline-size,11px)",
227
+ { lineHeight: "1.2", letterSpacing: "0.12em" }
228
+ ]
229
+ },
230
+ // ─── Line heights (v3.0) ─────────────────────────────────────────────
231
+ lineHeight: {
232
+ heading: "var(--lh-heading, 1.0)",
233
+ display: "var(--lh-display, 0.95)",
234
+ body: "var(--lh-body, 1.6)",
235
+ caption: "var(--lh-caption, 1.4)"
236
+ },
237
+ // ─── Aspect ratios (v3.0) ────────────────────────────────────────────
238
+ aspectRatio: {
239
+ banner: "21 / 9",
240
+ feature: "16 / 9",
241
+ portrait: "3 / 4",
242
+ cinematic: "21 / 9"
243
+ },
244
+ // ─── Spacing tokens (v3.0 reference) ────────────────────────────────
245
+ spacing: {
246
+ "space-1": "var(--space-1, 4px)",
247
+ "space-2": "var(--space-2, 8px)",
248
+ "space-3": "var(--space-3, 12px)",
249
+ "space-4": "var(--space-4, 16px)",
250
+ "space-5": "var(--space-5, 20px)",
251
+ "space-6": "var(--space-6, 24px)",
252
+ "space-8": "var(--space-8, 32px)",
253
+ "space-10": "var(--space-10, 40px)",
254
+ "space-12": "var(--space-12, 48px)",
255
+ "space-16": "var(--space-16, 64px)",
256
+ "space-20": "var(--space-20, 80px)",
257
+ "space-24": "var(--space-24, 96px)",
258
+ "space-32": "var(--space-32, 128px)"
259
+ },
260
+ // ─── Keyframes ───────────────────────────────────────────────────────
261
+ keyframes: {
262
+ "accordion-down": {
263
+ from: { height: "0" },
264
+ to: { height: "var(--radix-accordion-content-height)" }
265
+ },
266
+ "accordion-up": {
267
+ from: { height: "var(--radix-accordion-content-height)" },
268
+ to: { height: "0" }
269
+ },
270
+ fadeIn: {
271
+ from: { opacity: "0" },
272
+ to: { opacity: "1" }
273
+ },
274
+ fadeInUp: {
275
+ from: { opacity: "0", transform: "translateY(16px)" },
276
+ to: { opacity: "1", transform: "translateY(0)" }
277
+ },
278
+ fadeInDown: {
279
+ from: { opacity: "0", transform: "translateY(-16px)" },
280
+ to: { opacity: "1", transform: "translateY(0)" }
281
+ },
282
+ slideInRight: {
283
+ from: { opacity: "0", transform: "translateX(-24px)" },
284
+ to: { opacity: "1", transform: "translateX(0)" }
285
+ },
286
+ scaleIn: {
287
+ from: { opacity: "0", transform: "scale(0.92)" },
288
+ to: { opacity: "1", transform: "scale(1)" }
289
+ },
290
+ rotate: {
291
+ from: { transform: "rotate(0deg)" },
292
+ to: { transform: "rotate(360deg)" }
293
+ },
294
+ loadingDot: {
295
+ "0%, 80%, 100%": { opacity: "0.2", transform: "scale(0.8)" },
296
+ "40%": { opacity: "1", transform: "scale(1)" }
297
+ },
298
+ slideDown: {
299
+ from: { transform: "scaleY(0)", opacity: "0" },
300
+ to: { transform: "scaleY(1)", opacity: "1" }
301
+ },
302
+ glitch: {
303
+ "0%, 90%, 100%": { transform: "translate(0)" },
304
+ "92%": { transform: "translate(-2px, 1px)" },
305
+ "94%": { transform: "translate(2px, -1px)" },
306
+ "96%": { transform: "translate(-1px, -1px)" },
307
+ "98%": { transform: "translate(1px, 1px)" }
308
+ },
309
+ cursorBlink: {
310
+ "0%, 50%": { opacity: "1" },
311
+ "51%, 100%": { opacity: "0" }
312
+ },
313
+ diamondSpin: {
314
+ from: { transform: "rotate(0deg)" },
315
+ to: { transform: "rotate(360deg)" }
316
+ },
317
+ pulseGlow: {
318
+ "0%, 100%": { boxShadow: "0 0 8px hsl(var(--primary) / 0.2)" },
319
+ "50%": { boxShadow: "0 0 20px hsl(var(--primary) / 0.4)" }
320
+ },
321
+ scanLine: {
322
+ "0%": { top: "-5%" },
323
+ "100%": { top: "105%" }
324
+ },
325
+ skeletonShimmer: {
326
+ "0%": { backgroundPosition: "-200% 0" },
327
+ "100%": { backgroundPosition: "200% 0" }
328
+ },
329
+ shrink: {
330
+ from: { transform: "scaleX(1)" },
331
+ to: { transform: "scaleX(0)" }
332
+ },
333
+ countUp: {
334
+ from: { opacity: "0", transform: "translateY(8px)" },
335
+ to: { opacity: "1", transform: "translateY(0)" }
336
+ },
337
+ "dialog-in": {
338
+ from: { opacity: "0", transform: "translate(-50%, -48%) scale(0.96)" },
339
+ to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" }
340
+ },
341
+ "switch-thumb-spin": {
342
+ from: { transform: "rotate(0deg)" },
343
+ to: { transform: "rotate(360deg)" }
344
+ },
345
+ "frequency-bar": {
346
+ "0%": { transform: "scaleY(0.15)" },
347
+ "100%": { transform: "scaleY(1)" }
348
+ },
349
+ slideUp: {
350
+ from: { transform: "translateY(100%)", opacity: "0" },
351
+ to: { transform: "translateY(0)", opacity: "1" }
352
+ },
353
+ shake: {
354
+ "0%, 100%": { transform: "translateX(0)" },
355
+ "20%, 60%": { transform: "translateX(-4px)" },
356
+ "40%, 80%": { transform: "translateX(4px)" }
357
+ },
358
+ particleDrift: {
359
+ "0%": { transform: "translate(0, 0)" },
360
+ "33%": { transform: "translate(2px, -3px)" },
361
+ "66%": { transform: "translate(-2px, 2px)" },
362
+ "100%": { transform: "translate(0, 0)" }
363
+ }
364
+ },
365
+ // ─── Animation utilities ─────────────────────────────────────────────
366
+ animation: {
367
+ "accordion-down": "accordion-down 0.2s ease-out",
368
+ "accordion-up": "accordion-up 0.2s ease-out",
369
+ "fade-in": "fadeIn 0.3s ease forwards",
370
+ "fade-in-up": "fadeInUp 0.4s var(--ease-default, ease) forwards",
371
+ "fade-in-down": "fadeInDown 0.4s var(--ease-default, ease) forwards",
372
+ "slide-in-right": "slideInRight 0.4s var(--ease-default, ease) forwards",
373
+ "scale-in": "scaleIn 0.3s var(--ease-default, ease) forwards",
374
+ rotate: "rotate 1s linear infinite",
375
+ "loading-dot": "loadingDot 1.4s ease-in-out infinite both",
376
+ "slide-down": "slideDown 0.3s ease forwards",
377
+ glitch: "glitch 3s infinite",
378
+ "cursor-blink": "cursorBlink 1s step-end infinite",
379
+ "diamond-spin": "diamondSpin 0.8s linear infinite",
380
+ "switch-spin": "switch-thumb-spin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both",
381
+ "pulse-glow": "pulseGlow 2s ease-in-out infinite",
382
+ "scan-line": "scanLine 2s linear infinite",
383
+ skeleton: "skeletonShimmer 1.5s infinite",
384
+ shrink: "shrink 5s linear forwards",
385
+ "count-up": "countUp 0.4s var(--ease-default, ease) forwards",
386
+ "dialog-in": "dialog-in 0.3s var(--ease-default, ease) forwards",
387
+ "frequency-bar": "frequency-bar 0.8s ease-in-out infinite alternate",
388
+ "slide-up": "slideUp 0.3s var(--ease-sharp, ease) forwards",
389
+ shake: "shake 0.4s var(--ease-sharp, ease)",
390
+ "particle-drift": "particleDrift 3s ease-in-out infinite"
391
+ }
392
+ }
393
+ },
394
+ plugins: [
395
+ import_tailwindcss_animate.default,
396
+ // ─── Endfield Signature Utilities ────────────────────────────────────
397
+ (0, import_plugin.default)(
398
+ ({
399
+ addUtilities,
400
+ addComponents
401
+ }) => {
402
+ addComponents({
403
+ ".clip-corner": {
404
+ "clip-path": "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))"
405
+ },
406
+ ".clip-corner-sm": {
407
+ "clip-path": "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px))"
408
+ },
409
+ ".clip-corner-lg": {
410
+ "clip-path": "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))"
411
+ }
412
+ });
413
+ addComponents({
414
+ ".scanline-overlay": {
415
+ position: "relative"
416
+ },
417
+ ".scanline-overlay::after": {
418
+ content: '""',
419
+ position: "absolute",
420
+ inset: "0",
421
+ background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.015) 2px, rgba(255, 255, 255, 0.015) 4px)",
422
+ "pointer-events": "none",
423
+ "z-index": "1"
424
+ }
425
+ });
426
+ addUtilities({
427
+ ".animate-skeleton": {
428
+ background: "linear-gradient(90deg, hsl(var(--surface-1)) 0%, hsl(var(--surface-2)) 50%, hsl(var(--surface-1)) 100%)",
429
+ "background-size": "200% 100%",
430
+ animation: "skeletonShimmer 1.5s infinite"
431
+ }
432
+ });
433
+ addUtilities({
434
+ ".animate-slide-down": {
435
+ animation: "slideDown 0.3s ease forwards",
436
+ "transform-origin": "top",
437
+ overflow: "hidden"
438
+ }
439
+ });
440
+ addUtilities({
441
+ ".glow-yellow": {
442
+ "box-shadow": "0 0 20px hsl(var(--primary) / 0.2)"
443
+ },
444
+ ".glow-yellow-strong": {
445
+ "box-shadow": "0 0 40px hsl(var(--primary) / 0.3)"
446
+ },
447
+ ".text-glow-yellow": {
448
+ "text-shadow": "0 0 20px hsl(var(--primary) / 0.3)"
449
+ },
450
+ ".glow-lime": {
451
+ "box-shadow": "0 0 20px hsl(var(--ef-lime) / 0.2)"
452
+ },
453
+ ".text-glow-lime": {
454
+ "text-shadow": "0 0 16px hsl(var(--ef-lime) / 0.4)"
455
+ }
456
+ });
457
+ addUtilities({
458
+ ".bg-grid-pattern": {
459
+ "background-image": "linear-gradient(var(--bg-grid-color,rgba(255,255,255,0.03)) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid-color,rgba(255,255,255,0.03)) 1px, transparent 1px)",
460
+ "background-size": "var(--bg-grid-size,60px) var(--bg-grid-size,60px)"
461
+ },
462
+ ".bg-radial-glow": {
463
+ "background-image": "var(--bg-glow-primary)",
464
+ "background-repeat": "no-repeat",
465
+ "background-position": "center top",
466
+ "background-size": "100% 600px"
467
+ },
468
+ ".bg-radial-glow-lime": {
469
+ "background-image": "var(--bg-glow-lime)",
470
+ "background-repeat": "no-repeat",
471
+ "background-position": "center top",
472
+ "background-size": "100% 600px"
473
+ },
474
+ ".bg-diagonal-lines": {
475
+ "background-image": "var(--bg-diagonal)"
476
+ }
477
+ });
478
+ addUtilities({
479
+ ".gradient-line-h": {
480
+ height: "1px",
481
+ background: "linear-gradient(90deg, transparent 0%, hsl(var(--primary)) 50%, transparent 100%)"
482
+ },
483
+ ".gradient-line-v": {
484
+ width: "1px",
485
+ background: "linear-gradient(180deg, transparent 0%, hsl(var(--primary)) 50%, transparent 100%)"
486
+ }
487
+ });
488
+ }
489
+ )
490
+ ]
491
+ };
492
+ var tailwind_preset_default = reendPreset;