@enderfall/ui 0.1.7 → 0.1.9

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,4CAsCX,CAAC"}

package/dist/components/Tabs.js

@@ -1,8 +1,9 @@
 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" : ""]
+    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: [
                     "ef-tabs-content",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enderfall/ui",
   "private": false,
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,4 +30,4 @@
     "@types/react": "^18.2.43",
     "typescript": "^5.3.3"
   }
-}
+}

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/Tabs.css

@@ -28,59 +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,

package/src/components/Tabs.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { Button } from "./Button";
 
 export type TabsItem = {
   id: string;
@@ -35,9 +36,9 @@ export const Tabs = ({
     <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
+          <Button
             key={tab.id}
-            type="button"
+            variant="tab"
             className={["ef-tab", isVertical ? "ef-tab--vertical" : "", tab.id === activeTab ? "is-active" : ""]
               .filter(Boolean)
               .join(" ")}
@@ -46,7 +47,7 @@ export const Tabs = ({
             {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>
+          </Button>
         ))}
       </div>