@enderfall/ui 0.1.8 → 0.1.11

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from "react";
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: "primary" | "ghost" | "locked" | "danger" | "delete" | "warning" | "info" | "success";
+    variant?: "primary" | "ghost" | "locked" | "danger" | "delete" | "warning" | "info" | "success" | "tab";
     subvariant?: "default" | "glow";
 };
 export declare const Button: ({ variant, subvariant, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChG,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,8CAAsE,WAAW,4CAYvG,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EACJ,SAAS,GACT,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,SAAS,GACT,KAAK,CAAC;IACV,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,8CAAsE,WAAW,4CAYvG,CAAC"}

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

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

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button";
 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: [
+    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) => {
+                    const isActive = tab.id === activeTab;
+                    return (_jsxs(Button, { variant: isActive ? "primary" : "tab", subvariant: isActive ? "glow" : "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "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 && isActive ? _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,

package/package.json

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

package/src/components/Button.css

@@ -75,6 +75,61 @@
   color: var(--ef-button-text);
 }
 
+.ef-button.tab {
+  color: rgba(238, 241, 246, 0.75);
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  padding: 8px 18px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: rgba(15, 18, 28, 0.7);
+  box-shadow: none;
+  cursor: pointer;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+:root[data-theme="light"] .ef-button.tab,
+:root[data-theme="plain-light"] .ef-button.tab,
+:root[data-theme="galaxy"] .ef-button.tab,
+:root[data-theme="plain-dark"] .ef-button.tab,
+:root[data-theme="system"] .ef-button.tab {
+  color: rgba(238, 241, 246, 0.75);
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 8px 18px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: rgba(15, 18, 28, 0.7);
+  box-shadow: none;
+}
+
+.ef-button.tab:hover {
+  color: #eef1f6;
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
+:root[data-theme="light"] .ef-button.tab:hover,
+:root[data-theme="plain-light"] .ef-button.tab:hover,
+:root[data-theme="galaxy"] .ef-button.tab:hover,
+:root[data-theme="plain-dark"] .ef-button.tab:hover,
+:root[data-theme="system"] .ef-button.tab:hover {
+  color: #eef1f6;
+  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
+  transform: translateY(-1px);
+}
+
 .theme-preview {
   position: relative;
   --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);

package/src/components/Button.tsx

@@ -1,7 +1,16 @@
 import type { ButtonHTMLAttributes } from "react";
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: "primary" | "ghost" | "locked" | "danger" | "delete" | "warning" | "info" | "success";
+  variant?:
+    | "primary"
+    | "ghost"
+    | "locked"
+    | "danger"
+    | "delete"
+    | "warning"
+    | "info"
+    | "success"
+    | "tab";
   subvariant?: "default" | "glow";
 };
 

package/src/components/Dropdown.tsx

@@ -217,13 +217,15 @@ export const Dropdown = (props: DropdownProps) => {
             }}
             onMouseLeave={scheduleClose}
           >
-            <button
+            <Button
               className="ef-menu-button"
               type="button"
+              variant={props.menuOpen === menu.id ? "primary" : "tab"}
+              subvariant={props.menuOpen === menu.id ? "glow" : "default"}
               data-open={props.menuOpen === menu.id ? "true" : "false"}
             >
               {menu.label}
-            </button>
+            </Button>
             {props.menuOpen === menu.id ? (
               <div
                 className="ef-menu-popover"

package/src/components/HeaderMenu.css

@@ -9,73 +9,15 @@
   width: fit-content;
 }
 
-.ef-menu-group {
-  position: relative;
-}
-
+.ef-menu-group {
+  position: relative;
+}
+
 .ef-menu-button {
-  color: rgba(238, 241, 246, 0.75);
-  text-decoration: none;
   font-size: 1rem;
-  font-weight: 600;
-  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-  padding: 8px 18px;
-  border-radius: 8px;
-  border: 2px solid transparent;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  background: rgba(15, 18, 28, 0.7);
-  box-shadow: none;
-  cursor: pointer;
-}
-
-:root[data-theme="light"] .ef-menu-button,
-:root[data-theme="plain-light"] .ef-menu-button,
-:root[data-theme="galaxy"] .ef-menu-button,
-:root[data-theme="plain-dark"] .ef-menu-button,
-:root[data-theme="system"] .ef-menu-button {
-  color: rgba(238, 241, 246, 0.75);
-  text-decoration: none;
-  font-size: 1rem;
-  font-weight: 600;
-  background: rgba(15, 18, 28, 0.7);
-  border-radius: 8px;
-  border: 2px solid transparent;
   padding: 8px 18px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  box-shadow: none;
-}
-
-.ef-menu-button:hover {
-  color: #eef1f6;
-  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
-  transform: translateY(-1px);
-}
-
-:root[data-theme="light"] .ef-menu-button:hover,
-:root[data-theme="plain-light"] .ef-menu-button:hover,
-:root[data-theme="galaxy"] .ef-menu-button:hover,
-:root[data-theme="plain-dark"] .ef-menu-button:hover,
-:root[data-theme="system"] .ef-menu-button:hover {
-  color: #eef1f6;
-  box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
-  transform: translateY(-1px);
-}
-
-.ef-menu-button:focus-visible {
-  color: #eef1f6;
-  box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
-  transform: translateY(-1px);
-}
-
-.ef-menu-button[data-open="true"],
-.ef-menu-group[data-open="true"] > .ef-menu-button {
-  background:
-    linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
-    var(--ef-border-gradient) border-box;
-  color: var(--text-strong);
-  box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
 }
 
 .ef-menu-popover {

package/src/components/Tabs.css

@@ -28,67 +28,9 @@
 }
 
 .ef-tab {
-  color: rgba(238, 241, 246, 0.75);
-  text-decoration: none;
-  font-size: 1rem;
-  font-weight: 600;
-  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-  padding: 8px 18px;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  background: rgba(15, 18, 28, 0.7);
-  box-shadow: none;
-  cursor: pointer;
-  font-family: inherit;
-  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 {
-  color: rgba(238, 241, 246, 0.75);
-  text-decoration: none;
-  font-size: 1rem;
-  font-weight: 600;
-  padding: 8px 18px;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  background: rgba(15, 18, 28, 0.7);
-  box-shadow: none;
-}
-
-.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;

package/src/components/Tabs.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { Button } from "./Button";
 
 export type TabsItem = {
   id: string;
@@ -34,20 +35,24 @@ export const Tabs = ({
   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
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          return (
+          <Button
             key={tab.id}
-            type="button"
-            className={["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
+            variant={isActive ? "primary" : "tab"}
+            subvariant={isActive ? "glow" : "default"}
+            className={["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "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>
-        ))}
+            {isVertical && isActive ? <span className="ef-tab-active-indicator" /> : null}
+          </Button>
+          );
+        })}
       </div>
 
       {(active?.content || renderTabContent) && (