@enderfall/ui 0.1.4 → 0.1.6

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 (9) hide show
  1. package/dist/components/Tabs.d.ts +20 -0
  2. package/dist/components/Tabs.d.ts.map +1 -0
  3. package/dist/components/Tabs.js +14 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -0
  7. package/package.json +1 -1
  8. package/src/components/HeaderMenu.css +11 -7
  9. package/src/components/Tabs.css +37 -5
package/dist/components/Tabs.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import type { ReactNode } from "react";
2
+ export type TabsItem = {
3
+ id: string;
4
+ label: string;
5
+ icon?: ReactNode;
6
+ content?: ReactNode;
7
+ };
8
+ type TabsProps = {
9
+ tabs: TabsItem[];
10
+ activeTab: string;
11
+ onChange: (tabId: string) => void;
12
+ orientation?: "horizontal" | "vertical";
13
+ showContentBackground?: boolean;
14
+ className?: string;
15
+ tabContentClassName?: string;
16
+ renderTabContent?: (tab: TabsItem) => ReactNode;
17
+ };
18
+ export declare const Tabs: ({ tabs, activeTab, onChange, orientation, showContentBackground, className, tabContentClassName, renderTabContent, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
19
+ export {};
20
+ //# sourceMappingURL=Tabs.d.ts.map
package/dist/components/Tabs.d.ts.map ADDED
@@ -0,0 +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;AAEvC,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"}
package/dist/components/Tabs.js ADDED
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export const Tabs = ({ tabs, activeTab, onChange, orientation = "horizontal", showContentBackground = false, className, tabContentClassName, renderTabContent, }) => {
3
+ const isVertical = orientation === "vertical";
4
+ const active = tabs.find((tab) => tab.id === activeTab);
5
+ 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", { type: "button", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
6
+ .filter(Boolean)
7
+ .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: [
8
+ "ef-tabs-content",
9
+ showContentBackground ? "ef-tabs-content--background" : "",
10
+ tabContentClassName,
11
+ ]
12
+ .filter(Boolean)
13
+ .join(" "), children: renderTabContent ? renderTabContent(active) : active?.content }))] }));
14
+ };
package/dist/index.d.ts CHANGED
@@ -13,6 +13,7 @@ export { PreferencesModal } from "./components/PreferencesModal";
13
13
  export { Toggle } from "./components/Toggle";
14
14
  export { Slider } from "./components/Slider";
15
15
  export { StatDots } from "./components/StatDots";
16
+ export { Tabs } from "./components/Tabs";
16
17
  export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
17
18
  type ThemeOptions<T extends ThemeMode> = {
18
19
  storageKey: string;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,KAAK,YAAY,CAAC,CAAC,SAAS,SAAS,IAAI;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,MAS3E,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,EAAE,OAAO,CAAC,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,SAOjF,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,KAAK,YAAY,CAAC,CAAC,SAAS,SAAS,IAAI;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,MAS3E,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,SAAS,EAAE,OAAO,CAAC,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,SAOjF,CAAC"}
package/dist/index.js CHANGED
@@ -12,6 +12,7 @@ export { PreferencesModal } from "./components/PreferencesModal";
12
12
  export { Toggle } from "./components/Toggle";
13
13
  export { Slider } from "./components/Slider";
14
14
  export { StatDots } from "./components/StatDots";
15
+ export { Tabs } from "./components/Tabs";
15
16
  export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
16
17
  export const getStoredTheme = (options) => {
17
18
  const stored = localStorage.getItem(options.storageKey);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.1.4",
4
+ "version": "0.1.6",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/components/HeaderMenu.css CHANGED
@@ -14,16 +14,18 @@
14
14
  }
15
15
 
16
16
  .ef-menu-button {
17
+ color: rgba(238, 241, 246, 0.75);
18
+ text-decoration: none;
19
+ font-size: 1rem;
20
+ font-weight: 600;
21
+ transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
17
22
  padding: 8px 18px;
18
23
  border-radius: 8px;
19
- background: rgba(15, 18, 28, 0.7);
20
- box-shadow: none;
21
24
  border: 2px solid transparent;
22
- font-weight: 600;
23
- color: rgba(238, 241, 246, 0.75);
24
25
  text-transform: uppercase;
25
26
  letter-spacing: 0.08em;
26
- transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
27
+ background: rgba(15, 18, 28, 0.7);
28
+ box-shadow: none;
27
29
  cursor: pointer;
28
30
  }
29
31
 
@@ -32,15 +34,17 @@
32
34
  :root[data-theme="galaxy"] .ef-menu-button,
33
35
  :root[data-theme="plain-dark"] .ef-menu-button,
34
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;
35
41
  background: rgba(15, 18, 28, 0.7);
36
42
  border-radius: 8px;
37
43
  border: 2px solid transparent;
38
44
  padding: 8px 18px;
39
- font-weight: 600;
40
45
  text-transform: uppercase;
41
46
  letter-spacing: 0.08em;
42
47
  box-shadow: none;
43
- color: rgba(238, 241, 246, 0.75);
44
48
  }
45
49
 
46
50
  .ef-menu-button:hover {
package/src/components/Tabs.css CHANGED
@@ -28,27 +28,59 @@
28
28
  }
29
29
 
30
30
  .ef-tab {
31
- border: 2px solid transparent;
31
+ color: rgba(238, 241, 246, 0.75);
32
+ text-decoration: none;
33
+ font-size: 1rem;
34
+ font-weight: 600;
35
+ transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
32
36
  padding: 8px 18px;
33
37
  border-radius: 8px;
38
+ border: 2px solid transparent;
39
+ text-transform: uppercase;
40
+ letter-spacing: 0.08em;
34
41
  background: rgba(15, 18, 28, 0.7);
35
- color: rgba(238, 241, 246, 0.75);
36
- font-weight: 600;
42
+ box-shadow: none;
37
43
  cursor: pointer;
38
44
  font-family: inherit;
39
- letter-spacing: 0.08em;
40
- transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
41
45
  display: inline-flex;
42
46
  align-items: center;
43
47
  gap: 8px;
44
48
  }
45
49
 
50
+ :root[data-theme="light"] .ef-tab,
51
+ :root[data-theme="plain-light"] .ef-tab,
52
+ :root[data-theme="galaxy"] .ef-tab,
53
+ :root[data-theme="plain-dark"] .ef-tab,
54
+ :root[data-theme="system"] .ef-tab {
55
+ color: rgba(238, 241, 246, 0.75);
56
+ text-decoration: none;
57
+ font-size: 1rem;
58
+ font-weight: 600;
59
+ padding: 8px 18px;
60
+ border-radius: 8px;
61
+ border: 2px solid transparent;
62
+ text-transform: uppercase;
63
+ letter-spacing: 0.08em;
64
+ background: rgba(15, 18, 28, 0.7);
65
+ box-shadow: none;
66
+ }
67
+
46
68
  .ef-tab:hover {
47
69
  color: #eef1f6;
48
70
  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
49
71
  transform: translateY(-1px);
50
72
  }
51
73
 
74
+ :root[data-theme="light"] .ef-tab:hover,
75
+ :root[data-theme="plain-light"] .ef-tab:hover,
76
+ :root[data-theme="galaxy"] .ef-tab:hover,
77
+ :root[data-theme="plain-dark"] .ef-tab:hover,
78
+ :root[data-theme="system"] .ef-tab:hover {
79
+ color: #eef1f6;
80
+ box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
81
+ transform: translateY(-1px);
82
+ }
83
+
52
84
  .ef-tab.is-active {
53
85
  background:
54
86
  linear-gradient(#0b0c1a, #0b0c1a) padding-box,