@enderfall/ui 0.1.9 → 0.1.14

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

@@ -3,9 +3,12 @@ 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, { variant: "tab", 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.9",
+  "version": "0.1.14",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/Button.css

@@ -96,6 +96,21 @@
   gap: 8px;
 }
 
+.ef-button.tab:focus-visible {
+  color: #eef1f6;
+  box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
+  transform: translateY(-1px);
+}
+
+.ef-button.tab.is-active,
+.ef-button.tab[data-open="true"] {
+  background:
+    linear-gradient(#0b0c1a, #0b0c1a) padding-box,
+    linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d) border-box;
+  color: #f6f5ff;
+  box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
+}
+
 :root[data-theme="light"] .ef-button.tab,
 :root[data-theme="plain-light"] .ef-button.tab,
 :root[data-theme="galaxy"] .ef-button.tab,
@@ -130,6 +145,33 @@
   transform: translateY(-1px);
 }
 
+:root[data-theme="light"] .ef-button.tab:focus-visible,
+:root[data-theme="plain-light"] .ef-button.tab:focus-visible,
+:root[data-theme="galaxy"] .ef-button.tab:focus-visible,
+:root[data-theme="plain-dark"] .ef-button.tab:focus-visible,
+:root[data-theme="system"] .ef-button.tab:focus-visible {
+  color: #eef1f6;
+  box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
+  transform: translateY(-1px);
+}
+
+:root[data-theme="light"] .ef-button.tab.is-active,
+:root[data-theme="plain-light"] .ef-button.tab.is-active,
+:root[data-theme="galaxy"] .ef-button.tab.is-active,
+:root[data-theme="plain-dark"] .ef-button.tab.is-active,
+:root[data-theme="system"] .ef-button.tab.is-active,
+:root[data-theme="light"] .ef-button.tab[data-open="true"],
+:root[data-theme="plain-light"] .ef-button.tab[data-open="true"],
+:root[data-theme="galaxy"] .ef-button.tab[data-open="true"],
+:root[data-theme="plain-dark"] .ef-button.tab[data-open="true"],
+:root[data-theme="system"] .ef-button.tab[data-open="true"] {
+  background:
+    linear-gradient(#0b0c1a, #0b0c1a) padding-box,
+    linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d) border-box;
+  color: #f6f5ff;
+  box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
+}
+
 .theme-preview {
   position: relative;
   --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);

package/src/components/Dropdown.tsx

@@ -217,13 +217,17 @@ export const Dropdown = (props: DropdownProps) => {
             }}
             onMouseLeave={scheduleClose}
           >
-            <button
-              className="ef-menu-button"
+            <Button
+              className={["ef-menu-button", props.menuOpen === menu.id ? "is-active" : ""]
+                .filter(Boolean)
+                .join(" ")}
               type="button"
+              variant="tab"
+              subvariant="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

@@ -31,14 +31,6 @@
   gap: 8px;
 }
 
-.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

@@ -35,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) => (
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          return (
           <Button
             key={tab.id}
             variant="tab"
-            className={["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
+            subvariant="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}
+            {isVertical && isActive ? <span className="ef-tab-active-indicator" /> : null}
           </Button>
-        ))}
+          );
+        })}
       </div>
 
       {(active?.content || renderTabContent) && (