@edux-design/buttons 0.0.1

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@edux-design/buttons",
+  "version": "0.0.1",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "build": "tsup src/index.js --format esm,cjs",
+    "dev": "tsup src/index.js --watch --format esm,cjs",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "tailwindcss": "^4.1.12",
+    "postcss": "^8.5.6",
+    "tsup": "^8.5.0",
+    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.12"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@edux-design/utils": "*"
+  }
+}

package/src/elements/Button.jsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from "react";
+import { cx } from "@edux-design/utils";
+
+export const Button = forwardRef(
+  (
+    {
+      children,
+      size = "medium",
+      isSecondary,
+      isDanger,
+      isBare,
+      isStretched,
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    let variant = "primary";
+    if (isBare) variant = "bare";
+    if (isSecondary) variant = "secondary";
+    if (isDanger) variant = "danger";
+    if (disabled) variant = "disabled";
+
+    // handle conflicting props - the last bool wins. i.e. The priority we are accepting is isbare, isSecondary, isDanger, disabled
+
+    if (process.env.NODE_ENV !== "production") {
+      const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+      if (count > 1) {
+        console.warn(
+          "[Button]: Multiple variant props passed. Using the highest priority only."
+        );
+      }
+    }
+
+    const defaults =
+      "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out";
+
+    const fonts =
+      "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
+
+    //FIX-ME - Remove hardcoded values
+    const sizes = {
+      small: "h-[36px] py-8 px-16 rounded-lg text-sm",
+      medium: "h-[44px] py-8 px-16 rounded-lg text-base",
+      large: "h-[56px] py-8 px-16 rounded-lg text-lg",
+    };
+
+    const width = isStretched ? "w-full" : "w-fit-content";
+
+    const variants = {
+      primary:
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      secondary:
+        "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
+      bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      danger:
+        "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
+      disabled:
+        "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline",
+    };
+
+    const STYLES = cx(defaults, sizes[size], width, fonts, variants[variant]);
+
+    return (
+      <button
+        role="button"
+        type="button"
+        aria-disabled={disabled}
+        disabled={disabled}
+        className={STYLES}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);

package/src/elements/MenuButton.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { MenuButtonContext } from "../util/MenuButtonContext";
+import { cx } from "@edux-design/utils";
+import { Chevron } from "@edux-design/icons";
+
+export function MenuButton({ children, size }) {
+  const SPLIT_BUTTON_STYLES = cx(
+    "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
+    {
+      "h-[32px]": size === "small",
+      "h-[40px] py-2": size === "medium" || size === undefined,
+    }
+  );
+  return (
+    <MenuButtonContext.Provider value>
+      <div>{children}</div>
+      <Chevron />
+    </MenuButtonContext.Provider>
+  );
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./elements/Button";
+export { MenuButton } from "./elements/MenuButton";

package/src/util/MenuButtonContext.jsx

@@ -0,0 +1,3 @@
+import React, { createContext, useContext } from "react";
+
+export const MenuButtonContext = createContext();