@enderfall/ui 0.1.0 → 0.1.4

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 (45) hide show
  1. package/assets/brand/enderfall-lockup.png +0 -0
  2. package/assets/brand/enderfall-lockup.svg +8 -0
  3. package/assets/brand/enderfall-mark.png +0 -0
  4. package/assets/brand/enderfall-mark.svg +8 -0
  5. package/dist/components/Button.d.ts +2 -1
  6. package/dist/components/Button.d.ts.map +1 -1
  7. package/dist/components/Button.js +8 -1
  8. package/dist/components/Dropdown.d.ts.map +1 -1
  9. package/dist/components/Dropdown.js +2 -2
  10. package/package.json +5 -2
  11. package/src/base.css +160 -0
  12. package/src/components/AccessGate.css +24 -0
  13. package/src/components/AccessGate.tsx +61 -0
  14. package/src/components/BookmarkDropdown.css +220 -0
  15. package/src/components/Button.css +183 -0
  16. package/src/components/Button.tsx +20 -0
  17. package/src/components/Dropdown.tsx +570 -0
  18. package/src/components/FloatingFooter.css +49 -0
  19. package/src/components/FloatingFooter.tsx +27 -0
  20. package/src/components/FormField.tsx +29 -0
  21. package/src/components/HeaderMenu.css +280 -0
  22. package/src/components/Input.css +68 -0
  23. package/src/components/Input.tsx +23 -0
  24. package/src/components/MainHeader.css +167 -0
  25. package/src/components/MainHeader.tsx +51 -0
  26. package/src/components/Modal.css +282 -0
  27. package/src/components/Modal.tsx +142 -0
  28. package/src/components/Panel.css +71 -0
  29. package/src/components/Panel.tsx +31 -0
  30. package/src/components/PreferencesModal.tsx +67 -0
  31. package/src/components/SideMenu.tsx +239 -0
  32. package/src/components/Slider.css +114 -0
  33. package/src/components/Slider.tsx +33 -0
  34. package/src/components/StackedCard.css +180 -0
  35. package/src/components/StackedCard.tsx +125 -0
  36. package/src/components/StatDots.css +122 -0
  37. package/src/components/StatDots.tsx +53 -0
  38. package/src/components/Tabs.css +108 -0
  39. package/src/components/Tabs.tsx +68 -0
  40. package/src/components/Toggle.css +161 -0
  41. package/src/components/Toggle.tsx +38 -0
  42. package/src/components/UserMenu.css +273 -0
  43. package/src/index.ts +45 -0
  44. package/src/theme.css +353 -0
  45. package/styles.css +1 -0
package/src/components/Button.css ADDED
@@ -0,0 +1,183 @@
1
+ .ef-button {
2
+ padding: 10px 18px;
3
+ border-radius: var(--ef-control-radius, 12px);
4
+ font-weight: 600;
5
+ text-decoration: none;
6
+ text-align: center;
7
+ border: 2px solid transparent;
8
+ background:
9
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
10
+ var(--ef-button-border) border-box;
11
+ color: var(--ef-button-text);
12
+ cursor: pointer;
13
+ box-shadow: var(--shadow);
14
+ }
15
+
16
+ .ef-button--glow {
17
+ box-shadow: var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45));
18
+ }
19
+
20
+ .ef-button:disabled {
21
+ opacity: 0.6;
22
+ cursor: not-allowed;
23
+ box-shadow: none;
24
+ background:
25
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
26
+ var(--ef-button-border-soft) border-box;
27
+ }
28
+
29
+ .ef-button.primary {
30
+ background:
31
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
32
+ var(--ef-button-border) border-box;
33
+ color: var(--ef-button-text);
34
+ }
35
+
36
+ .ef-button.ghost {
37
+ background:
38
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
39
+ var(--ef-button-border) border-box;
40
+ color: var(--ef-button-text);
41
+ }
42
+
43
+ .ef-button.locked {
44
+ background: var(--ef-button-locked-bg);
45
+ border-color: var(--ef-button-locked-border);
46
+ color: var(--ef-button-text);
47
+ }
48
+
49
+ .ef-button.danger,
50
+ .ef-button.delete {
51
+ background:
52
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
53
+ var(--ef-button-danger-border) border-box;
54
+ color: var(--ef-button-text);
55
+ }
56
+
57
+ .ef-button.warning {
58
+ background:
59
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
60
+ var(--ef-button-warning-border) border-box;
61
+ color: var(--ef-button-text);
62
+ }
63
+
64
+ .ef-button.info {
65
+ background:
66
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
67
+ var(--ef-button-info-border) border-box;
68
+ color: var(--ef-button-text);
69
+ }
70
+
71
+ .ef-button.success {
72
+ background:
73
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
74
+ var(--ef-button-success-border) border-box;
75
+ color: var(--ef-button-text);
76
+ }
77
+
78
+ .theme-preview {
79
+ position: relative;
80
+ --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
81
+ width: 100%;
82
+ justify-content: space-between;
83
+ text-align: left;
84
+ }
85
+
86
+ .theme-preview-list {
87
+ display: grid;
88
+ gap: 6px;
89
+ }
90
+
91
+ .theme-preview.ef-button {
92
+ border-radius: var(--ef-control-radius, 12px);
93
+ }
94
+
95
+ .theme-preview--galaxy {
96
+ --ef-control-radius: 12px;
97
+ --ef-button-surface: #0b0c1a;
98
+ --ef-button-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
99
+ --ef-button-border-soft: linear-gradient(
100
+ 135deg,
101
+ rgba(0, 229, 255, 0.6),
102
+ rgba(124, 77, 255, 0.6),
103
+ rgba(255, 77, 210, 0.6),
104
+ rgba(255, 183, 77, 0.6)
105
+ );
106
+ --ef-button-text: #f6f5ff;
107
+ }
108
+
109
+ .theme-preview--system {
110
+ --ef-control-radius: 12px;
111
+ --ef-button-surface: #0b0c1a;
112
+ --ef-button-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
113
+ --ef-button-border-soft: linear-gradient(
114
+ 135deg,
115
+ rgba(0, 229, 255, 0.6),
116
+ rgba(124, 77, 255, 0.6),
117
+ rgba(255, 77, 210, 0.6),
118
+ rgba(255, 183, 77, 0.6)
119
+ );
120
+ --ef-button-text: #f6f5ff;
121
+ }
122
+
123
+ @media (prefers-color-scheme: light) {
124
+ .theme-preview--system {
125
+ --shadow: 0 20px 50px rgba(24, 32, 40, 0.12);
126
+ --ef-button-surface: #ffffff;
127
+ --ef-button-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
128
+ --ef-button-border-soft: linear-gradient(
129
+ 135deg,
130
+ rgba(0, 229, 255, 0.6),
131
+ rgba(124, 77, 255, 0.6),
132
+ rgba(255, 77, 210, 0.6),
133
+ rgba(255, 183, 77, 0.6)
134
+ );
135
+ --ef-button-text: #1d232a;
136
+ }
137
+ }
138
+
139
+ .theme-preview--light {
140
+ --ef-control-radius: 12px;
141
+ --shadow: 0 20px 50px rgba(24, 32, 40, 0.12);
142
+ --ef-button-surface: #ffffff;
143
+ --ef-button-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
144
+ --ef-button-border-soft: linear-gradient(
145
+ 135deg,
146
+ rgba(0, 229, 255, 0.6),
147
+ rgba(124, 77, 255, 0.6),
148
+ rgba(255, 77, 210, 0.6),
149
+ rgba(255, 183, 77, 0.6)
150
+ );
151
+ --ef-button-text: #1d232a;
152
+ }
153
+
154
+ .theme-preview--plain-light {
155
+ --ef-control-radius: 12px;
156
+ --shadow: 0 20px 50px rgba(24, 32, 40, 0.12);
157
+ --ef-button-surface: #ffffff;
158
+ --ef-button-border: linear-gradient(135deg, rgba(24, 32, 40, 0.18), rgba(24, 32, 40, 0.18));
159
+ --ef-button-border-soft: linear-gradient(135deg, rgba(24, 32, 40, 0.18), rgba(24, 32, 40, 0.18));
160
+ --ef-button-text: #1d232a;
161
+ }
162
+
163
+ .theme-preview--plain-dark {
164
+ --ef-control-radius: 12px;
165
+ --ef-button-surface: #0b0c1a;
166
+ --ef-button-border: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
167
+ --ef-button-border-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18));
168
+ --ef-button-text: #f6f5ff;
169
+ }
170
+
171
+ .theme-preview--atelier {
172
+ --ef-control-radius: 0px;
173
+ --shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
174
+ --ef-button-surface: #1b0b18;
175
+ --ef-button-border: linear-gradient(135deg, #ff86c8, #e255a1, #7dd6f6);
176
+ --ef-button-border-soft: linear-gradient(
177
+ 135deg,
178
+ rgba(255, 134, 200, 0.5),
179
+ rgba(226, 85, 161, 0.5),
180
+ rgba(125, 214, 246, 0.5)
181
+ );
182
+ --ef-button-text: #f6eaf2;
183
+ }
package/src/components/Button.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import type { ButtonHTMLAttributes } from "react";
2
+
3
+ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
4
+ variant?: "primary" | "ghost" | "locked" | "danger" | "delete" | "warning" | "info" | "success";
5
+ subvariant?: "default" | "glow";
6
+ };
7
+
8
+ export const Button = ({ variant = "primary", subvariant = "default", className, ...props }: ButtonProps) => (
9
+ <button
10
+ {...props}
11
+ className={[
12
+ "ef-button",
13
+ variant,
14
+ subvariant === "glow" ? "ef-button--glow" : "",
15
+ className,
16
+ ]
17
+ .filter(Boolean)
18
+ .join(" ")}
19
+ />
20
+ );