@enderfall/ui 0.1.2 → 0.1.5

package/dist/components/Tabs.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export type TabsItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    content?: ReactNode;
+};
+type TabsProps = {
+    tabs: TabsItem[];
+    activeTab: string;
+    onChange: (tabId: string) => void;
+    orientation?: "horizontal" | "vertical";
+    showContentBackground?: boolean;
+    className?: string;
+    tabContentClassName?: string;
+    renderTabContent?: (tab: TabsItem) => ReactNode;
+};
+export declare const Tabs: ({ tabs, activeTab, onChange, orientation, showContentBackground, className, tabContentClassName, renderTabContent, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/Tabs.d.ts.map

@@ -0,0 +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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Tabs = ({ tabs, activeTab, onChange, orientation = "horizontal", showContentBackground = false, className, tabContentClassName, renderTabContent, }) => {
+    const isVertical = orientation === "vertical";
+    const active = tabs.find((tab) => tab.id === activeTab);
+    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" : ""]
+                        .filter(Boolean)
+                        .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: [
+                    "ef-tabs-content",
+                    showContentBackground ? "ef-tabs-content--background" : "",
+                    tabContentClassName,
+                ]
+                    .filter(Boolean)
+                    .join(" "), children: renderTabContent ? renderTabContent(active) : active?.content }))] }));
+};

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { PreferencesModal } from "./components/PreferencesModal";
 export { Toggle } from "./components/Toggle";
 export { Slider } from "./components/Slider";
 export { StatDots } from "./components/StatDots";
+export { Tabs } from "./components/Tabs";
 export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
 type ThemeOptions<T extends ThemeMode> = {
     storageKey: string;

package/dist/index.d.ts.map

@@ -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"}
+{"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

@@ -12,6 +12,7 @@ export { PreferencesModal } from "./components/PreferencesModal";
 export { Toggle } from "./components/Toggle";
 export { Slider } from "./components/Slider";
 export { StatDots } from "./components/StatDots";
+export { Tabs } from "./components/Tabs";
 export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
 export const getStoredTheme = (options) => {
     const stored = localStorage.getItem(options.storageKey);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enderfall/ui",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/Tabs.css

@@ -0,0 +1,136 @@
+.ef-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.ef-tabs--vertical {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.ef-tabs-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 16px;
+  background:
+    linear-gradient(#0b0c1a, #0b0c1a) padding-box,
+    linear-gradient(135deg, rgba(0, 229, 255, 0.5), rgba(124, 77, 255, 0.5), rgba(255, 77, 210, 0.5)) border-box;
+  border: 1px solid transparent;
+}
+
+.ef-tabs-list--vertical {
+  flex-direction: column;
+  min-width: 220px;
+}
+
+.ef-tab {
+  background: rgba(15, 18, 28, 0.7);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  padding: 8px 18px;
+  box-shadow: none;
+  font-weight: 600;
+  color: rgba(238, 241, 246, 0.75);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+:root[data-theme="light"] .ef-tab,
+:root[data-theme="plain-light"] .ef-tab,
+:root[data-theme="galaxy"] .ef-tab,
+:root[data-theme="plain-dark"] .ef-tab,
+:root[data-theme="system"] .ef-tab {
+  background: rgba(15, 18, 28, 0.7);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  padding: 8px 18px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  box-shadow: none;
+  color: rgba(238, 241, 246, 0.75);
+}
+
+.ef-tab:hover {
+  color: #eef1f6;
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+:root[data-theme="light"] .ef-tab:hover,
+:root[data-theme="plain-light"] .ef-tab:hover,
+:root[data-theme="galaxy"] .ef-tab:hover,
+:root[data-theme="plain-dark"] .ef-tab:hover,
+:root[data-theme="system"] .ef-tab:hover {
+  color: #eef1f6;
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+.ef-tab.is-active {
+  background:
+    linear-gradient(#0b0c1a, #0b0c1a) padding-box,
+    linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d) border-box;
+  color: #f6f5ff;
+  box-shadow: 0 0 32px rgba(124, 77, 255, 0.65);
+}
+
+.ef-tab--vertical {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.ef-tab-icon {
+  display: inline-flex;
+}
+
+.ef-tab-text {
+  display: inline-flex;
+}
+
+.ef-tab-active-indicator {
+  margin-left: auto;
+  width: 2px;
+  height: 22px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
+}
+
+.ef-tabs-content {
+  min-width: 0;
+  flex: 1;
+}
+
+.ef-tabs-content--background {
+  border-radius: 16px;
+  padding: 12px;
+  background:
+    linear-gradient(#0b0c1a, #0b0c1a) padding-box,
+    linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35)) border-box;
+  border: 1px solid transparent;
+}
+
+@media (max-width: 768px) {
+  .ef-tabs--vertical {
+    flex-direction: column;
+  }
+
+  .ef-tabs-list--vertical {
+    min-width: 100%;
+  }
+
+  .ef-tab {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}

package/src/components/Tabs.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+
+export type TabsItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  content?: ReactNode;
+};
+
+type TabsProps = {
+  tabs: TabsItem[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  orientation?: "horizontal" | "vertical";
+  showContentBackground?: boolean;
+  className?: string;
+  tabContentClassName?: string;
+  renderTabContent?: (tab: TabsItem) => ReactNode;
+};
+
+export const Tabs = ({
+  tabs,
+  activeTab,
+  onChange,
+  orientation = "horizontal",
+  showContentBackground = false,
+  className,
+  tabContentClassName,
+  renderTabContent,
+}: TabsProps) => {
+  const isVertical = orientation === "vertical";
+  const active = tabs.find((tab) => tab.id === activeTab);
+
+  return (
+    <div className={["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" ")}>
+      <div className={["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" ")}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
+              .filter(Boolean)
+              .join(" ")}
+            onClick={() => onChange(tab.id)}
+          >
+            {tab.icon ? <span className="ef-tab-icon">{tab.icon}</span> : null}
+            <span className="ef-tab-text">{tab.label}</span>
+            {isVertical && tab.id === activeTab ? <span className="ef-tab-active-indicator" /> : null}
+          </button>
+        ))}
+      </div>
+
+      {(active?.content || renderTabContent) && (
+        <div
+          className={[
+            "ef-tabs-content",
+            showContentBackground ? "ef-tabs-content--background" : "",
+            tabContentClassName,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {renderTabContent ? renderTabContent(active as TabsItem) : active?.content}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/index.ts

@@ -13,6 +13,7 @@ export { PreferencesModal } from "./components/PreferencesModal";
 export { Toggle } from "./components/Toggle";
 export { Slider } from "./components/Slider";
 export { StatDots } from "./components/StatDots";
+export { Tabs } from "./components/Tabs";
 export { SideMenu, SideMenuSubmenu } from "./components/SideMenu";
 
 type ThemeOptions<T extends ThemeMode> = {

package/styles.css

@@ -7,6 +7,7 @@
 @import "./src/components/Input.css";
 @import "./src/components/Toggle.css";
 @import "./src/components/Slider.css";
+@import "./src/components/Tabs.css";
 @import "./src/components/StackedCard.css";
 @import "./src/components/Panel.css";
 @import "./src/components/Modal.css";