@enderfall/ui 0.2.11 → 0.2.13

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/StackedCard.css +40 -40
  3. package/src/components/Tabs.css +7 -2
  4. package/src/components/Tabs.tsx +28 -13
  5. package/src/components/UserMenu.css +18 -18
  6. package/src/variables.css +20 -7
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.2.11",
4
+ "version": "0.2.13",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/components/StackedCard.css CHANGED
@@ -1,31 +1,31 @@
1
- .ef-stacked-frame {
2
- position: relative;
3
- padding: 2px 2px 15px;
4
- border-radius: 24px;
5
- background: var(--ef-border-gradient);
6
- box-shadow: var(--ef-stacked-frame-shadow);
7
- }
1
+ .ef-stacked-frame {
2
+ position: relative;
3
+ padding: 2px 2px 15px;
4
+ border-radius: var(--ef-stacked-frame-radius, 24px);
5
+ background: var(--ef-border-gradient);
6
+ box-shadow: var(--ef-stacked-frame-shadow);
7
+ }
8
8
 
9
9
  .ef-stacked-frame::after {
10
10
  content: "";
11
11
  position: absolute;
12
12
  left: 6px;
13
- right: 6px;
14
- bottom: -6px;
15
- height: 10px;
16
- border-radius: 999px;
17
- background: var(--ef-border-gradient);
18
- filter: blur(12px);
19
- opacity: 0.7;
20
- }
13
+ right: 6px;
14
+ bottom: -6px;
15
+ height: 10px;
16
+ border-radius: var(--ef-stacked-pill-radius, 999px);
17
+ background: var(--ef-border-gradient);
18
+ filter: blur(12px);
19
+ opacity: 0.7;
20
+ }
21
21
 
22
- .ef-stacked-card {
23
- position: relative;
24
- padding: 20px;
25
- border-radius: 22px;
26
- background: var(--ef-stacked-card-bg);
27
- overflow: hidden;
28
- box-shadow: var(--ef-stacked-card-shadow);
22
+ .ef-stacked-card {
23
+ position: relative;
24
+ padding: 20px;
25
+ border-radius: var(--ef-stacked-card-radius, 22px);
26
+ background: var(--ef-stacked-card-bg);
27
+ overflow: hidden;
28
+ box-shadow: var(--ef-stacked-card-shadow);
29
29
  min-height: 320px;
30
30
  display: flex;
31
31
  flex-direction: column;
@@ -37,9 +37,9 @@
37
37
  }
38
38
 
39
39
  .ef-stacked-image {
40
- position: absolute;
41
- inset: 0;
42
- border-radius: 18px;
40
+ position: absolute;
41
+ inset: 0;
42
+ border-radius: var(--ef-stacked-image-radius, 18px);
43
43
  background:
44
44
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16), transparent 55%),
45
45
  var(--ef-stacked-image-gradient);
@@ -51,14 +51,14 @@
51
51
  background-repeat: no-repeat;
52
52
  }
53
53
 
54
- .ef-stacked-image::after {
55
- content: "";
56
- position: absolute;
57
- inset: 0;
58
- border-radius: 18px;
59
- background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2), transparent 55%);
60
- mix-blend-mode: screen;
61
- }
54
+ .ef-stacked-image::after {
55
+ content: "";
56
+ position: absolute;
57
+ inset: 0;
58
+ border-radius: var(--ef-stacked-image-radius, 18px);
59
+ background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2), transparent 55%);
60
+ mix-blend-mode: screen;
61
+ }
62
62
 
63
63
  .ef-stacked-body {
64
64
  position: relative;
@@ -127,9 +127,9 @@
127
127
  justify-content: flex-start;
128
128
  }
129
129
 
130
- .ef-stacked-tag {
131
- padding: 8px 18px;
132
- border-radius: 8px;
130
+ .ef-stacked-tag {
131
+ padding: 8px 18px;
132
+ border-radius: var(--ef-stacked-control-radius, 8px);
133
133
  background: var(--ef-stacked-tag-bg);
134
134
  border: 2px solid transparent;
135
135
  font-size: 0.7rem;
@@ -138,10 +138,10 @@
138
138
  color: var(--ef-stacked-tag-text);
139
139
  }
140
140
 
141
- .ef-stacked-action {
142
- margin-top: 4px;
143
- padding: 12px 32px;
144
- border-radius: 8px;
141
+ .ef-stacked-action {
142
+ margin-top: 4px;
143
+ padding: 12px 32px;
144
+ border-radius: var(--ef-stacked-control-radius, 8px);
145
145
  font-weight: 600;
146
146
  font-family: inherit;
147
147
  text-transform: uppercase;
package/src/components/Tabs.css CHANGED
@@ -14,12 +14,16 @@
14
14
  display: flex;
15
15
  flex-wrap: wrap;
16
16
  gap: 10px;
17
+ }
18
+
19
+ .ef-tabs-list-panel {
17
20
  padding: 10px;
18
21
  border-radius: var(--menu-radius, 16px);
19
22
  background:
20
23
  linear-gradient(var(--ef-tabs-surface), var(--ef-tabs-surface)) padding-box,
21
24
  var(--ef-tabs-border) border-box;
22
25
  border: 1px solid transparent;
26
+ box-shadow: none;
23
27
  }
24
28
 
25
29
  .ef-tabs-list--vertical {
@@ -48,7 +52,7 @@
48
52
  margin-left: auto;
49
53
  width: 2px;
50
54
  height: 22px;
51
- border-radius: 999px;
55
+ border-radius: var(--ef-tabs-indicator-radius, 999px);
52
56
  background: var(--ef-tabs-indicator);
53
57
  }
54
58
 
@@ -57,13 +61,14 @@
57
61
  flex: 1;
58
62
  }
59
63
 
60
- .ef-tabs-content--background {
64
+ .ef-tabs-content-panel {
61
65
  border-radius: var(--menu-radius, 16px);
62
66
  padding: 12px;
63
67
  background:
64
68
  linear-gradient(var(--ef-tabs-content-surface), var(--ef-tabs-content-surface)) padding-box,
65
69
  var(--ef-tabs-content-border) border-box;
66
70
  border: 1px solid transparent;
71
+ box-shadow: none;
67
72
  }
68
73
 
69
74
  @media (max-width: 768px) {
package/src/components/Tabs.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ReactNode } from "react";
2
2
  import { Button } from "./Button";
3
+ import { Panel } from "./Panel";
3
4
 
4
5
  export type TabsItem = {
5
6
  id: string;
@@ -34,7 +35,13 @@ export const Tabs = ({
34
35
 
35
36
  return (
36
37
  <div className={["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" ")}>
37
- <div className={["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" ")}>
38
+ <Panel
39
+ variant="card"
40
+ borderWidth={1}
41
+ className={["ef-tabs-list", "ef-tabs-list-panel", isVertical ? "ef-tabs-list--vertical" : ""]
42
+ .filter(Boolean)
43
+ .join(" ")}
44
+ >
38
45
  {tabs.map((tab) => {
39
46
  const isActive = tab.id === activeTab;
40
47
  return (
@@ -53,20 +60,28 @@ export const Tabs = ({
53
60
  </Button>
54
61
  );
55
62
  })}
56
- </div>
63
+ </Panel>
57
64
 
58
65
  {(active?.content || renderTabContent) && (
59
- <div
60
- className={[
61
- "ef-tabs-content",
62
- showContentBackground ? "ef-tabs-content--background" : "",
63
- tabContentClassName,
64
- ]
65
- .filter(Boolean)
66
- .join(" ")}
67
- >
68
- {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
69
- </div>
66
+ showContentBackground ? (
67
+ <Panel
68
+ variant="card"
69
+ borderWidth={1}
70
+ className={["ef-tabs-content", "ef-tabs-content-panel", tabContentClassName]
71
+ .filter(Boolean)
72
+ .join(" ")}
73
+ >
74
+ {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
75
+ </Panel>
76
+ ) : (
77
+ <div
78
+ className={["ef-tabs-content", tabContentClassName]
79
+ .filter(Boolean)
80
+ .join(" ")}
81
+ >
82
+ {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
83
+ </div>
84
+ )
70
85
  )}
71
86
  </div>
72
87
  );
package/src/components/UserMenu.css CHANGED
@@ -30,15 +30,15 @@
30
30
  border-bottom-color: transparent;
31
31
  }
32
32
 
33
- .avatar {
34
- width: 32px;
35
- height: 32px;
36
- border-radius: 50%;
37
- background: rgba(255, 255, 255, 0.12);
38
- display: grid;
39
- place-items: center;
40
- overflow: hidden;
41
- flex-shrink: 0;
33
+ .avatar {
34
+ width: 32px;
35
+ height: 32px;
36
+ border-radius: var(--ef-control-radius, 12px);
37
+ background: rgba(255, 255, 255, 0.12);
38
+ display: grid;
39
+ place-items: center;
40
+ overflow: hidden;
41
+ flex-shrink: 0;
42
42
  }
43
43
 
44
44
  .avatar img {
@@ -183,15 +183,15 @@
183
183
  padding: 10px 12px;
184
184
  }
185
185
 
186
- .dropdown-avatar {
187
- width: 34px;
188
- height: 34px;
189
- border-radius: 10px;
190
- background: rgba(255, 255, 255, 0.12);
191
- display: grid;
192
- place-items: center;
193
- overflow: hidden;
194
- font-size: 0.7rem;
186
+ .dropdown-avatar {
187
+ width: 34px;
188
+ height: 34px;
189
+ border-radius: var(--ef-control-radius, 12px);
190
+ background: rgba(255, 255, 255, 0.12);
191
+ display: grid;
192
+ place-items: center;
193
+ overflow: hidden;
194
+ font-size: 0.7rem;
195
195
  font-weight: 700;
196
196
  text-transform: uppercase;
197
197
  }
package/src/variables.css CHANGED
@@ -59,6 +59,7 @@
59
59
  --ef-tabs-content-surface: #0b0c1a;
60
60
  --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
61
61
  --ef-tabs-indicator: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
62
+ --ef-tabs-indicator-radius: 999px;
62
63
  --ef-slider-surface: var(--ef-surface);
63
64
  --ef-slider-border-color: var(--line-strong);
64
65
  --ef-slider-track-radius: 6px;
@@ -81,10 +82,15 @@
81
82
  --ef-input-focus: rgba(124, 77, 255, 0.55);
82
83
  --ef-input-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2);
83
84
  --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
84
- --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
85
- --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
86
- --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
87
- --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
85
+ --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
86
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
87
+ --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
88
+ --ef-stacked-frame-radius: 24px;
89
+ --ef-stacked-card-radius: 22px;
90
+ --ef-stacked-image-radius: 18px;
91
+ --ef-stacked-control-radius: 8px;
92
+ --ef-stacked-pill-radius: 999px;
93
+ --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
88
94
  --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
89
95
  --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
90
96
  --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
@@ -434,6 +440,7 @@
434
440
  --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
435
441
  --ef-button-hover-transform: translateY(-1px);
436
442
  --ef-nav-text: rgba(246, 234, 242, 0.78);
443
+ --ef-nav-radius: 0px;
437
444
  --ef-nav-text-hover: #f6eaf2;
438
445
  --ef-nav-text-active: #f6eaf2;
439
446
  --ef-nav-surface: rgba(27, 11, 24, 0.74);
@@ -449,6 +456,7 @@
449
456
  --ef-tabs-content-surface: #1b0b18;
450
457
  --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 134, 200, 0.3), rgba(226, 85, 161, 0.3), rgba(125, 214, 246, 0.3));
451
458
  --ef-tabs-indicator: linear-gradient(180deg, #ff86c8, #e255a1, #7dd6f6);
459
+ --ef-tabs-indicator-radius: 0px;
452
460
  --ef-input-surface: #1b0b18;
453
461
  --ef-input-border: var(--ef-border-gradient);
454
462
  --ef-input-text: #f6eaf2;
@@ -459,6 +467,11 @@
459
467
  --ef-stacked-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.56);
460
468
  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.66);
461
469
  --ef-stacked-frame-shadow: 0 18px 40px rgba(0, 0, 0, 0.52);
470
+ --ef-stacked-frame-radius: 0px;
471
+ --ef-stacked-card-radius: 0px;
472
+ --ef-stacked-image-radius: 0px;
473
+ --ef-stacked-control-radius: 0px;
474
+ --ef-stacked-pill-radius: 0px;
462
475
  --ef-stacked-tag-bg: rgba(255, 134, 200, 0.14);
463
476
  --ef-stacked-tag-text: rgba(246, 234, 242, 0.82);
464
477
  --ef-stacked-body-muted: rgba(246, 234, 242, 0.74);
@@ -524,9 +537,9 @@
524
537
  --menu-line: rgba(192, 59, 132, 0.5);
525
538
  --menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
526
539
  --menu-bg-soft: rgba(255, 134, 200, 0.12);
527
- --menu-radius: 18px;
528
- --menu-muted: #dbc7d7;
529
- }
540
+ --menu-radius: 0px;
541
+ --menu-muted: #dbc7d7;
542
+ }
530
543
 
531
544
  :root[data-theme="galaxy"] {
532
545
  --ef-slider-track-radius: 6px;