reend-components 0.1.0 → 0.3.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 (10) hide show
  1. package/README.md +106 -8
  2. package/dist/lib/index.cjs +1 -1
  3. package/dist/lib/index.cjs.map +1 -1
  4. package/dist/lib/index.d.ts +376 -0
  5. package/dist/lib/index.mjs +1810 -150
  6. package/dist/lib/index.mjs.map +1 -1
  7. package/dist/lib/style.css +1 -1
  8. package/package.json +44 -12
  9. package/src/styles/variables.css +71 -1
  10. package/src/tailwind-preset.ts +189 -2
package/src/styles/variables.css CHANGED
@@ -7,6 +7,22 @@
7
7
  *
8
8
  * Dark mode: default (no class needed)
9
9
  * Light mode: add class="light" to <html> or <body>
10
+ *
11
+ * ─── Token Reference: Hex ↔ HSL ────────────────────────────────────────────
12
+ * HSL format is used to enable dynamic opacity modifiers: hsl(var(--token) / 0.3)
13
+ *
14
+ * Token Hex HSL
15
+ * --ef-yellow #FFD429 48 100% 58%
16
+ * --ef-yellow-dark #C28C00 48 85% 39%
17
+ * --ef-blue #4DA8DA 201 66% 58%
18
+ * --ef-blue-light #6BBFE8 196 64% 69%
19
+ * --ef-blue-dark #2A6A8F 202 56% 38%
20
+ * --ef-cyan #00E5FF 186 100% 50%
21
+ * --ef-red #FF4757 355 100% 64%
22
+ * --ef-green #2ED573 145 67% 51%
23
+ * --ef-orange #FFA502 39 100% 50%
24
+ * --ef-purple #A55EEA 270 77% 64%
25
+ * ───────────────────────────────────────────────────────────────────────────
10
26
  */
11
27
 
12
28
  :root {
@@ -26,7 +42,6 @@
26
42
  /* Accents */
27
43
  --ef-yellow: 48 100% 58%;
28
44
  --ef-yellow-dark: 48 85% 39%;
29
- --ef-yellow-glow: 48 100% 58% / 0.25;
30
45
  --ef-blue: 201 66% 58%;
31
46
  --ef-blue-light: 196 64% 69%;
32
47
  --ef-blue-dark: 202 56% 38%;
@@ -62,10 +77,15 @@
62
77
  --destructive-foreground: 0 0% 100%;
63
78
 
64
79
  --border: 0 0% 100% / 0.06;
80
+ --border-strong: 0 0% 100% / 0.12;
81
+ --border-accent: 48 100% 58% / 0.4;
65
82
  --input: 0 0% 100% / 0.1;
66
83
  --ring: 48 100% 58%;
67
84
 
68
85
  --radius: 0px;
86
+ --radius-none: 0px;
87
+ --radius-sm: 2px;
88
+ --radius-md: 4px;
69
89
 
70
90
  /* ═══ SURFACES ═══ */
71
91
  --surface-canvas: 0 0% 4%;
@@ -75,6 +95,39 @@
75
95
  --surface-3: 0 0% 13.3%;
76
96
  --surface-hover: 0 0% 11.8%;
77
97
  --surface-active: 0 0% 14.5%;
98
+
99
+ /* ═══ LAYOUT ═══ */
100
+ --header-height: 64px;
101
+ --sidebar-width: 280px;
102
+
103
+ /* ═══ SHADOWS ═══ */
104
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
105
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
106
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
107
+ --shadow-glow: 0 0 20px hsl(var(--primary) / 0.2);
108
+
109
+ /* ═══ Z-INDEX ═══ */
110
+ --z-base: 0;
111
+ --z-dropdown: 10;
112
+ --z-sticky: 20;
113
+ --z-overlay: 30;
114
+ --z-modal: 40;
115
+ --z-popover: 50;
116
+ --z-toast: 60;
117
+ --z-tooltip: 70;
118
+
119
+ /* ═══ ANIMATION — EASING ═══ */
120
+ --ease-default: cubic-bezier(0.25, 0.8, 0.25, 1);
121
+ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
122
+ --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
123
+ --ease-smooth: cubic-bezier(0.45, 0, 0.55, 1);
124
+
125
+ /* ═══ ANIMATION — DURATION ═══ */
126
+ --duration-instant: 100ms;
127
+ --duration-fast: 150ms;
128
+ --duration-normal: 250ms;
129
+ --duration-slow: 400ms;
130
+ --duration-slower: 700ms;
78
131
  }
79
132
 
80
133
  /* ═══ LIGHT MODE ═══ */
@@ -94,6 +147,15 @@
94
147
  --ef-yellow: 42 90% 42%;
95
148
  --ef-yellow-dark: 42 85% 30%;
96
149
 
150
+ /* Accent colors adjusted for light mode readability */
151
+ --ef-blue-light: 196 50% 55%;
152
+ --ef-blue-dark: 202 56% 30%;
153
+ --ef-cyan: 186 80% 35%;
154
+ --ef-red: 355 85% 48%;
155
+ --ef-green: 145 60% 38%;
156
+ --ef-orange: 39 90% 38%;
157
+ --ef-purple: 270 65% 50%;
158
+
97
159
  --background: 0 0% 97%;
98
160
  --foreground: 0 0% 8%;
99
161
 
@@ -119,6 +181,8 @@
119
181
  --destructive-foreground: 0 0% 100%;
120
182
 
121
183
  --border: 0 0% 0% / 0.1;
184
+ --border-strong: 0 0% 0% / 0.18;
185
+ --border-accent: 42 90% 42% / 0.4;
122
186
  --input: 0 0% 0% / 0.12;
123
187
  --ring: 42 90% 42%;
124
188
 
@@ -129,6 +193,12 @@
129
193
  --surface-3: 0 0% 93%;
130
194
  --surface-hover: 0 0% 92%;
131
195
  --surface-active: 0 0% 88%;
196
+
197
+ /* Shadow adjustments for light mode */
198
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08);
199
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.08);
200
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 4px 6px -4px rgb(0 0 0 / 0.08);
201
+ --shadow-glow: 0 0 20px hsl(var(--primary) / 0.25);
132
202
  }
133
203
 
134
204
  /* ═══ BASE STYLES ═══ */
package/src/tailwind-preset.ts CHANGED
@@ -71,9 +71,9 @@ const reendPreset: Partial<Config> = {
71
71
  "white-muted": "hsl(var(--ef-white-muted))",
72
72
  "white-soft": "hsl(var(--ef-white-soft))",
73
73
  white: "hsl(var(--ef-white))",
74
+ "pure-white": "hsl(var(--ef-pure-white))",
74
75
  yellow: "hsl(var(--ef-yellow))",
75
76
  "yellow-dark": "hsl(var(--ef-yellow-dark))",
76
- "yellow-glow": "hsl(var(--ef-yellow-glow))",
77
77
  blue: "hsl(var(--ef-blue))",
78
78
  "blue-light": "hsl(var(--ef-blue-light))",
79
79
  "blue-dark": "hsl(var(--ef-blue-dark))",
@@ -98,7 +98,42 @@ const reendPreset: Partial<Config> = {
98
98
  md: "calc(var(--radius) - 2px)",
99
99
  sm: "calc(var(--radius) - 4px)",
100
100
  },
101
+ // ─── Shadows referencing CSS vars ───────────────────────────────────
102
+ boxShadow: {
103
+ sm: "var(--shadow-sm)",
104
+ md: "var(--shadow-md)",
105
+ lg: "var(--shadow-lg)",
106
+ glow: "var(--shadow-glow)",
107
+ },
108
+ // ─── Z-Index scale matching CSS vars ────────────────────────────────
109
+ zIndex: {
110
+ base: "0",
111
+ dropdown: "10",
112
+ sticky: "20",
113
+ overlay: "30",
114
+ modal: "40",
115
+ popover: "50",
116
+ toast: "60",
117
+ tooltip: "70",
118
+ },
119
+ // ─── Transition durations matching CSS vars ──────────────────────────
120
+ transitionDuration: {
121
+ instant: "100ms",
122
+ fast: "150ms",
123
+ normal: "250ms",
124
+ slow: "400ms",
125
+ slower: "700ms",
126
+ },
127
+ // ─── Transition easing matching CSS vars ─────────────────────────────
128
+ transitionTimingFunction: {
129
+ default: "cubic-bezier(0.25, 0.8, 0.25, 1)",
130
+ bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
131
+ sharp: "cubic-bezier(0.4, 0, 0.2, 1)",
132
+ smooth: "cubic-bezier(0.45, 0, 0.55, 1)",
133
+ },
134
+ // ─── Keyframes ───────────────────────────────────────────────────────
101
135
  keyframes: {
136
+ // Existing
102
137
  "accordion-down": {
103
138
  from: { height: "0" },
104
139
  to: { height: "var(--radix-accordion-content-height)" },
@@ -107,14 +142,166 @@ const reendPreset: Partial<Config> = {
107
142
  from: { height: "var(--radix-accordion-content-height)" },
108
143
  to: { height: "0" },
109
144
  },
145
+ // Signature & design system animations
146
+ fadeIn: {
147
+ from: { opacity: "0" },
148
+ to: { opacity: "1" },
149
+ },
150
+ fadeInUp: {
151
+ from: { opacity: "0", transform: "translateY(16px)" },
152
+ to: { opacity: "1", transform: "translateY(0)" },
153
+ },
154
+ slideInRight: {
155
+ from: { opacity: "0", transform: "translateX(-10px)" },
156
+ to: { opacity: "1", transform: "translateX(0)" },
157
+ },
158
+ slideDown: {
159
+ from: { transform: "scaleY(0)", opacity: "0" },
160
+ to: { transform: "scaleY(1)", opacity: "1" },
161
+ },
162
+ glitch: {
163
+ "0%, 90%, 100%": { transform: "translate(0)" },
164
+ "92%": { transform: "translate(-2px, 1px)" },
165
+ "94%": { transform: "translate(2px, -1px)" },
166
+ "96%": { transform: "translate(-1px, -1px)" },
167
+ "98%": { transform: "translate(1px, 1px)" },
168
+ },
169
+ cursorBlink: {
170
+ "0%, 50%": { opacity: "1" },
171
+ "51%, 100%": { opacity: "0" },
172
+ },
173
+ diamondSpin: {
174
+ from: { transform: "rotate(0deg)" },
175
+ to: { transform: "rotate(360deg)" },
176
+ },
177
+ pulseGlow: {
178
+ "0%, 100%": { boxShadow: "0 0 8px hsl(var(--primary) / 0.2)" },
179
+ "50%": { boxShadow: "0 0 20px hsl(var(--primary) / 0.4)" },
180
+ },
181
+ scanLine: {
182
+ "0%": { top: "-5%" },
183
+ "100%": { top: "105%" },
184
+ },
185
+ skeletonShimmer: {
186
+ "0%": { backgroundPosition: "-200% 0" },
187
+ "100%": { backgroundPosition: "200% 0" },
188
+ },
189
+ shrink: {
190
+ from: { transform: "scaleX(1)" },
191
+ to: { transform: "scaleX(0)" },
192
+ },
193
+ countUp: {
194
+ from: { opacity: "0", transform: "translateY(8px)" },
195
+ to: { opacity: "1", transform: "translateY(0)" },
196
+ },
110
197
  },
198
+ // ─── Animation utilities ─────────────────────────────────────────────
111
199
  animation: {
112
200
  "accordion-down": "accordion-down 0.2s ease-out",
113
201
  "accordion-up": "accordion-up 0.2s ease-out",
202
+ "fade-in": "fadeIn 0.3s ease forwards",
203
+ "fade-in-up": "fadeInUp 0.4s var(--ease-default, ease) forwards",
204
+ "slide-in-right": "slideInRight 0.3s var(--ease-smooth, ease) forwards",
205
+ "slide-down": "slideDown 0.3s ease forwards",
206
+ glitch: "glitch 3s infinite",
207
+ "cursor-blink": "cursorBlink 1s step-end infinite",
208
+ "diamond-spin": "diamondSpin 0.8s linear infinite",
209
+ "pulse-glow": "pulseGlow 2s ease-in-out infinite",
210
+ "scan-line": "scanLine 2s linear infinite",
211
+ skeleton: "skeletonShimmer 1.5s infinite",
212
+ shrink: "shrink 5s linear forwards",
213
+ "count-up": "countUp 0.4s var(--ease-default, ease) forwards",
114
214
  },
115
215
  },
116
216
  },
117
- plugins: [require("tailwindcss-animate")],
217
+ plugins: [
218
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
219
+ require("tailwindcss-animate"),
220
+ // ─── 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
+ });
241
+
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
+ });
257
+
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
+ });
267
+
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
+ });
276
+
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
+ });
289
+
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
+ }),
304
+ ],
118
305
  };
119
306
 
120
307
  export default reendPreset;