@enderfall/ui 0.1.9 → 0.1.11

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 (7) hide show
  1. package/dist/components/Tabs.d.ts.map +1 -1
  2. package/dist/components/Tabs.js +6 -3
  3. package/package.json +1 -1
  4. package/src/components/Dropdown.tsx +4 -2
  5. package/src/components/HeaderMenu.css +4 -62
  6. package/src/components/Tabs.css +0 -8
  7. package/src/components/Tabs.tsx +9 -5
package/dist/components/Tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,sHASlB,SAAS,4CAsCX,CAAC"}
1
+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,sHASlB,SAAS,4CA0CX,CAAC"}
package/dist/components/Tabs.js CHANGED
@@ -3,9 +3,12 @@ import { Button } from "./Button";
3
3
  export const Tabs = ({ tabs, activeTab, onChange, orientation = "horizontal", showContentBackground = false, className, tabContentClassName, renderTabContent, }) => {
4
4
  const isVertical = orientation === "vertical";
5
5
  const active = tabs.find((tab) => tab.id === activeTab);
6
- return (_jsxs("div", { className: ["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" "), children: [_jsx("div", { className: ["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" "), children: tabs.map((tab) => (_jsxs(Button, { variant: "tab", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
7
- .filter(Boolean)
8
- .join(" "), onClick: () => onChange(tab.id), children: [tab.icon ? _jsx("span", { className: "ef-tab-icon", children: tab.icon }) : null, _jsx("span", { className: "ef-tab-text", children: tab.label }), isVertical && tab.id === activeTab ? _jsx("span", { className: "ef-tab-active-indicator" }) : null] }, tab.id))) }), (active?.content || renderTabContent) && (_jsx("div", { className: [
6
+ return (_jsxs("div", { className: ["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" "), children: [_jsx("div", { className: ["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" "), children: tabs.map((tab) => {
7
+ const isActive = tab.id === activeTab;
8
+ return (_jsxs(Button, { variant: isActive ? "primary" : "tab", subvariant: isActive ? "glow" : "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
9
+ .filter(Boolean)
10
+ .join(" "), onClick: () => onChange(tab.id), children: [tab.icon ? _jsx("span", { className: "ef-tab-icon", children: tab.icon }) : null, _jsx("span", { className: "ef-tab-text", children: tab.label }), isVertical && isActive ? _jsx("span", { className: "ef-tab-active-indicator" }) : null] }, tab.id));
11
+ }) }), (active?.content || renderTabContent) && (_jsx("div", { className: [
9
12
  "ef-tabs-content",
10
13
  showContentBackground ? "ef-tabs-content--background" : "",
11
14
  tabContentClassName,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.1.9",
4
+ "version": "0.1.11",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/components/Dropdown.tsx CHANGED
@@ -217,13 +217,15 @@ export const Dropdown = (props: DropdownProps) => {
217
217
  }}
218
218
  onMouseLeave={scheduleClose}
219
219
  >
220
- <button
220
+ <Button
221
221
  className="ef-menu-button"
222
222
  type="button"
223
+ variant={props.menuOpen === menu.id ? "primary" : "tab"}
224
+ subvariant={props.menuOpen === menu.id ? "glow" : "default"}
223
225
  data-open={props.menuOpen === menu.id ? "true" : "false"}
224
226
  >
225
227
  {menu.label}
226
- </button>
228
+ </Button>
227
229
  {props.menuOpen === menu.id ? (
228
230
  <div
229
231
  className="ef-menu-popover"
package/src/components/HeaderMenu.css CHANGED
@@ -9,73 +9,15 @@
9
9
  width: fit-content;
10
10
  }
11
11
 
12
- .ef-menu-group {
13
- position: relative;
14
- }
15
-
12
+ .ef-menu-group {
13
+ position: relative;
14
+ }
15
+
16
16
  .ef-menu-button {
17
- color: rgba(238, 241, 246, 0.75);
18
- text-decoration: none;
19
17
  font-size: 1rem;
20
- font-weight: 600;
21
- transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
22
- padding: 8px 18px;
23
- border-radius: 8px;
24
- border: 2px solid transparent;
25
18
  text-transform: uppercase;
26
19
  letter-spacing: 0.08em;
27
- background: rgba(15, 18, 28, 0.7);
28
- box-shadow: none;
29
- cursor: pointer;
30
- }
31
-
32
- :root[data-theme="light"] .ef-menu-button,
33
- :root[data-theme="plain-light"] .ef-menu-button,
34
- :root[data-theme="galaxy"] .ef-menu-button,
35
- :root[data-theme="plain-dark"] .ef-menu-button,
36
- :root[data-theme="system"] .ef-menu-button {
37
- color: rgba(238, 241, 246, 0.75);
38
- text-decoration: none;
39
- font-size: 1rem;
40
- font-weight: 600;
41
- background: rgba(15, 18, 28, 0.7);
42
- border-radius: 8px;
43
- border: 2px solid transparent;
44
20
  padding: 8px 18px;
45
- text-transform: uppercase;
46
- letter-spacing: 0.08em;
47
- box-shadow: none;
48
- }
49
-
50
- .ef-menu-button:hover {
51
- color: #eef1f6;
52
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
53
- transform: translateY(-1px);
54
- }
55
-
56
- :root[data-theme="light"] .ef-menu-button:hover,
57
- :root[data-theme="plain-light"] .ef-menu-button:hover,
58
- :root[data-theme="galaxy"] .ef-menu-button:hover,
59
- :root[data-theme="plain-dark"] .ef-menu-button:hover,
60
- :root[data-theme="system"] .ef-menu-button:hover {
61
- color: #eef1f6;
62
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
63
- transform: translateY(-1px);
64
- }
65
-
66
- .ef-menu-button:focus-visible {
67
- color: #eef1f6;
68
- box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
69
- transform: translateY(-1px);
70
- }
71
-
72
- .ef-menu-button[data-open="true"],
73
- .ef-menu-group[data-open="true"] > .ef-menu-button {
74
- background:
75
- linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
76
- var(--ef-border-gradient) border-box;
77
- color: var(--text-strong);
78
- box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
79
21
  }
80
22
 
81
23
  .ef-menu-popover {
package/src/components/Tabs.css CHANGED
@@ -31,14 +31,6 @@
31
31
  gap: 8px;
32
32
  }
33
33
 
34
- .ef-tab.is-active {
35
- background:
36
- linear-gradient(#0b0c1a, #0b0c1a) padding-box,
37
- linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d) border-box;
38
- color: #f6f5ff;
39
- box-shadow: 0 0 32px rgba(124, 77, 255, 0.65);
40
- }
41
-
42
34
  .ef-tab--vertical {
43
35
  width: 100%;
44
36
  justify-content: flex-start;
package/src/components/Tabs.tsx CHANGED
@@ -35,20 +35,24 @@ export const Tabs = ({
35
35
  return (
36
36
  <div className={["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" ")}>
37
37
  <div className={["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" ")}>
38
- {tabs.map((tab) => (
38
+ {tabs.map((tab) => {
39
+ const isActive = tab.id === activeTab;
40
+ return (
39
41
  <Button
40
42
  key={tab.id}
41
- variant="tab"
42
- className={["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
43
+ variant={isActive ? "primary" : "tab"}
44
+ subvariant={isActive ? "glow" : "default"}
45
+ className={["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
43
46
  .filter(Boolean)
44
47
  .join(" ")}
45
48
  onClick={() => onChange(tab.id)}
46
49
  >
47
50
  {tab.icon ? <span className="ef-tab-icon">{tab.icon}</span> : null}
48
51
  <span className="ef-tab-text">{tab.label}</span>
49
- {isVertical && tab.id === activeTab ? <span className="ef-tab-active-indicator" /> : null}
52
+ {isVertical && isActive ? <span className="ef-tab-active-indicator" /> : null}
50
53
  </Button>
51
- ))}
54
+ );
55
+ })}
52
56
  </div>
53
57
 
54
58
  {(active?.content || renderTabContent) && (